*,
*::before,
*::after{
    box-sizing: border-box;
}

*{
    margin: 0;
}

.wrapper{
    /*border: 1px solid black;*/
    width: 90%;
    max-width: 1536px;
    margin-inline: auto ;
    position: relative;
    height: 100px;
    margin-top: 3rem;
    margin-bottom: 3rem;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1)20%,
        rgba(0,0,0,0)80%,
        rgba(0,0,0,0)
        ) ;
}

@keyframes scrollleft{

    to{
        left: -200px;
    }

}

.item{
    width: 200px;
    height: 100px;
    background-color:gainsboro;
    border-radius: 6px ;
    position: absolute;
    /*left: 100%;*/
    left: calc(200px * 8);
    
    animation-name: scrollleft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite ;
    /*animation-delay: -10s;*/
}

.item1{
    animation-delay: calc(30s /8 * (8 - 1) * -1);
}
.item2{
    animation-delay: calc(30s /8 * (8 - 2) * -1);
}
.item3{
    animation-delay: calc(30s /8 * (8 - 3) * -1);
}
.item4{
    animation-delay: calc(30s /8 * (8 - 4) * -1);
}
.item5{
    animation-delay: calc(30s /8 * (8 - 5) * -1);
}
.item6{
    animation-delay: calc(30s /8 * (8 - 6) * -1);
}
.item7{
    animation-delay: calc(30s /8 * (8 - 7) * -1);
}
.item8{
    animation-delay: calc(30s /8 * (8 - 8) * -1);
}