.slider {
    width: 100%;
    height: var(--height);
    overflow: hidden;

    /* vanish only at edges (0–5% left, 95–100% right) */
    mask-image: linear-gradient(to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        #000 5%,
        #000 95%,
        transparent 100%);
}

.slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    animation: autoRun 40s linear infinite;
    animation-delay: calc((40s / var(--quantity)) * (var(--position) - 1) - 40s) !important;
    transition: filter 0.5s;
}


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

/* Run LEFT */
@keyframes autoRun {
    from {
        left: 100%;
    }
    to {
        left: calc(var(--width) * -1);
    }
}

/* Pause + grayscale on hover */
.slider:hover .item {
    animation-play-state: paused !important;
    filter: grayscale(1);
}
.slider .item:hover {
    filter: grayscale(0);
}