.partners-slider {
    --numberOfItems: 4;
    --duration: 10s;
    --partners-height: 100px;
    box-sizing: border-box;
    width: 100%;
    height: var(--partners-height);
    overflow: hidden;
    mask-image: linear-gradient( to right, transparent, #000 10% 90%, transparent );
}

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

.partners-slider .list .item {
    width: var(--partners-height);
    height: var(--partners-height);
    position: absolute;
    left: 100%;
    animation: partnersAutorun var(--duration) linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (var(--duration) / var(--numberOfItems)) * (var(--position) - 1) - var(--duration)) !important;
}

.partners-slider .list .item img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

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

    to {
        left: calc(var(--partners-height) * -1);
    }
}

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

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