.brands-slider {
    padding-block: 12px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    mask-image: linear-gradient(to right, transparent 20% 80%, #000, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
}

.list {
    display: flex;
    width: calc(var(--width) * var(--imageQuantity) * 2);
    /* Double the width for seamless looping */
    gap: calc(var(--width) / 4);
    animation: autoScroll 10s linear infinite;
}

.list:hover {
    animation-play-state: paused !important;
}

.item {
    width: var(--width);
    height: var(--height);
    flex-shrink: 0;
}

.item img {
    width: 100%;
    height: 100%;
    transition: filter 0.5s ease-in-out;
}

@keyframes autoScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
    }
}

.brands-slider[reverse="true"] .list {
    animation: reverseScroll 7s linear infinite;
}

@keyframes reverseScroll {
    0% {
        transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
    }

    100% {
        transform: translateX(0);
    }
}

.brands-slider:hover .item img {
    filter: grayscale(1);
}

.brands-slider .item:hover img {
    filter: grayscale(0);
}