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

*{
    margin: 0;
}

body.light-mode .item img{
  filter: invert(0);
}

body.light-mode .item-m img{
  filter: invert(0);
}

.wrapper{
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    position: relative;
    height: 50px;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,1) 80%,
        rgba(0,0,0,0)
        );
}

@keyframes scrollLeft{
    to{
        left: -200px
    }
}

.item{
    width: 200px;
    height: 50px;
    border-radius: 6px;
    position: absolute;
    left: calc(190px * 17);
    animation-name: scrollLeft;
    animation-duration: 80s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.item img{
    display: block;
    width: 180px;
    filter: invert(1);
}

.item1{
    animation-delay: calc(80s / 17 * (17 - 1) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item2{
    animation-delay: calc(80s / 17 * (17 - 2) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item3{
    animation-delay: calc(80s / 17 * (17 - 3) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item4{
    animation-delay: calc(80s / 17 * (17 - 4) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item5{
    animation-delay: calc(80s / 17 * (17 - 5) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item6{
    animation-delay: calc(80s / 17 * (17 - 6) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item7{
    animation-delay: calc(80s / 17 * (17 - 7) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item8{
    animation-delay: calc(80s / 17 * (17 - 8) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item9{
    animation-delay: calc(80s / 17 * (17 - 9) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item10{
    animation-delay: calc(80s / 17 * (17 - 10) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item11{
    animation-delay: calc(80s / 17 * (17 - 11) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item12{
    animation-delay: calc(80s / 17 * (17 - 12) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item13{
    animation-delay: calc(80s / 17 * (17 - 13) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item14{
    animation-delay: calc(80s / 17 * (17 - 14) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item15{
    animation-delay: calc(80s / 17 * (17 - 15) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item16{
    animation-delay: calc(80s / 17 * (17 - 16) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item17{
    animation-delay: calc(80s / 17 * (17 - 17) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item18{
    animation-delay: calc(80s / 17 * (17 - 18) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item19{
    animation-delay: calc(80s / 17 * (17 - 19) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item20{
    animation-delay: calc(80s / 17 * (17 - 20) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item21{
    animation-delay: calc(80s / 17 * (17 - 21) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item17{
    animation-delay: calc(80s / 17 * (17 - 17) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

/** Carrossel Plataformas **/

.wrapper2{
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    position: relative;
    height: 50px;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0),
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,1) 80%,
        rgba(0,0,0,0)
        );
}

@keyframes scrollLeft{
    to{
        left: -200px
    }
}

.item-m{
    width: 200px;
    height: 50px;
    border-radius: 6px;
    position: absolute;
    left: calc(140px * 8);
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.item-m img{
    display: block;
    width: 180px;
    filter: invert(1);
}

.item1-m{
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item2-m{
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item3-m{
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item4-m{
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item5-m{
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item6-m{
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item7-m{
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}

.item8-m{
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
    margin-right: 10px;
    display: block;
    width: 190px;
}