/* carousel */

.carousel {
    --carousel-item-width: 8rem;
    --carousel-item-height: 4rem;
    height: var(--carousel-item-height);
    position: relative;
    mask-image: linear-gradient(to right,
            transparent,
            #000 10% 90%,
            transparent);
    overflow: hidden;
}


.carousel .list {
    display: flex;

    width: 100%;
    position: relative;
    min-width: calc(var(--carousel-item-width) * var(--quantity));

}

.carousel .list .item {
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    animation-delay: calc(10 / var(--quantity) * (var(--position) - 1) * 1s);
    transition: 0.3s;
}

.carousel .list .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carousel:hover .item {
    animation-play-state: paused !important;
    filter: grayscale(1);
}

.carousel .item:hover {
    filter: grayscale(0);
}

@keyframes autoRun {
    from {
        left: 100%;
    }

    to {
        left: calc(-1 * var(--carousel-item-width));
    }
}

@media (min-width: 768px) {
    .carousel {
        --carousel-item-width: 10rem;
        --carousel-item-height: 6rem;
    }
}