.band .container{
    width: 100vw;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    mask-image: linear-gradient(
        to right,
        transparent,
        #ffffff 10% 90%,
        transparent
    );
}


.slider, .slider2 {
    width: 90%;

    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #ffffff 10% 90%,
        transparent
    );
}

.slider .list ,.slider2 .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%;
    animation: autoRun 20s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc((10s / var(--quantity)) * (var(--position) - 1) )!important;
}
.slider2 .list .item{
    width: var(--width);   
    height: var(--height);   
    position: absolute;
    left: 100%;
    animation: autoRun 20s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc((20s / var(--quantity)) * (var(--position) - 1) )!important;
}
.slider .list .item p {
    width: 100%;
}
.slider2 .list .item img{
    width: 100%;
    filter: invert(100%);
}

@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 10s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}