.wrap-color{
    box-shadow: 
    0 -4px 8px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.3); 
}
.wrapper{
    position: relative;
    margin-inline: auto;
    height: 40px;
    overflow: hidden;
    mask-image: linear-gradient(to left,
    rgba(0,0,0,0),
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 80%,
    rgba(0,0,0,0)
    );
    margin-top: 5em;
    margin-bottom: 2em;

}

@keyframes scroll-left{
    to{
        left:-200px;
    }
}


.text.left{
    color: var(--clr-primary);
    font-size: 2rem;
    width: 200px;
    border-radius: 5px;
    position: absolute;
    left: max(calc(200px*6),100%);
    animation-name: scroll-left;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.text img{
    height: 50px;
}

.text1{
    animation-delay: calc(12s / 5 *(5 - 1) * -1);
}
.text2{
    animation-delay: calc(12s / 5 *(5 - 2) * -1);
}
.text3{
    animation-delay: calc(12s / 5 *(5 - 3) * -1);
}
.text4{
    animation-delay: calc(12s / 5 *(5 - 4) * -1);
}
.text5{
    animation-delay: calc(12s / 5 *(5 - 5) * -1);
}



@keyframes scroll-right{
    to{
        right:-200px;
    }
}

.text.right{
    color: white;
    font-size: 2rem;
    width: 200px;
    border-radius: 5px;
    position: absolute;
    right: max(calc(200px*6),100%);
    animation-name: scroll-right;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.text img{
    height: 50px;
}


@media (max-width:1600px) {
    .text{
        font-size: 1.6rem;
    }
    .text img{
        height: 40px;
    }
    .wrapper{
        height: 38px;
    }
}