:root {
    --wDesk12W: 368px;
    --wDesk12H: 440px;
    --wDesk10W: 430px;
}

@media (max-width: 1280px) {
    :root {
        --wDesk12W: 300px;
        --wDesk12H: 360px;
        --wDesk10W: 270px;
    }
}

@media (max-width: 768px) {
    :root {
        --wDesk12W: 300px;
        --wDesk12H: 360px;
        --wDesk10W: 235px;
    }
}

@media (max-width: 480px) {
    :root {
        --wDesk12W: 250px;
        --wDesk12H: 300px;
        --wDesk10W: 235px;
    }
}

.loop-slide > div {
    display: flex;
}

.loop-slide.loop-slider-12 > div {
    animation: slide-to-left-12 30s linear infinite;
}

.loop-slide.loop-slider-12 > div > * {
    min-width: var(--wDesk12W);
}

.loop-slide.loop-slider-12 img {
    min-height: var(--wDesk12H);
}


.loop-slide.loop-slider-10 > div {
    animation: slide-to-left-10 30s linear infinite;
}


.loop-slide.loop-slider-10 > div > * {
    min-width: var(--wDesk10W);
}

@keyframes slide-to-left-12 {
    100% { 
        transform: translateX(calc(-6 * var(--wDesk12W))); 
    }
}

@keyframes slide-to-left-10 {
    100% { 
        transform: translateX(calc(-5 * var(--wDesk10W))); 
    }
}

.loop-slide > div:hover {
    animation-play-state: paused;
}

.loop-slide.loop-slider-12,
.loop-slide.loop-slider-10 {
    overflow-x: scroll;
}

.slide-item img {
    object-fit: cover;
    object-position: 50% 50%;
}

.loop-slide {
    overflow: hidden;
}

.loop-slide::-webkit-scrollbar {
    display: none;
}