main{
    width: min(1200px, 90vw);
    margin: 30px auto;
    padding: 20px 0;
    text-align: center;
    /* margin-bottom: 75px; */
}
.slider{
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
    margin: 0 auto;
}
.slider .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
    justify-content: center;
}
.slider .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 70s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (70s / var(--quantity)) * (var(--position) - 1) - 70s)!important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider .list .item img{
    width: 80%;
    max-height: 80px;
    object-fit: contain;
}
@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
.slider:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.slider .item:hover{
    filter: grayscale(0);
}
.slider[reverse="true"] .item{
    animation: reversePlay 50s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}
@media (max-width: 768px) {
    .slider {
        --width: 150px;
        --height: 80px;
    }
    
    .slider .list .item img {
        width: 70%;
        max-height: 60px;
    }
}