.wrapper {
    width: 99%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 100px;
    margin-top: 1rem;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 10%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0)
    );
}
@keyframes scrollLeft {
    to{
        left: -200px;
    }
}
.item__scroll {
    width: 200px;
    height: 100px;
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation-name: scrollLeft;
    animation-duration: var(--t);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item__scroll__1 {
    animation-delay: calc(var(--t) / 6 * (6 - 1) * -1)
}
.item__scroll__2 {
    animation-delay: calc(var(--t) / 6 * (6 - 2) * -1)
}
.item__scroll__3 {
    animation-delay: calc(var(--t) / 6 * (6 - 3) * -1)
}
.item__scroll__4 {
    animation-delay: calc(var(--t) / 6 * (6 - 4) * -1)
}
.item__scroll__5 {
    animation-delay: calc(var(--t) / 6 * (6 - 5) * -1)
}
.item__scroll__6 {
    animation-delay: calc(var(--t) / 6 * (6 - 6) * -1)
}