.logotypes-line {
    position: relative;
    height: 100%;
    z-index: 2000;
    margin-top: 30px;
}

.logotypes-line img {
    max-height: 145px;
}
  
.scroller__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

@media(max-width: 767px) {
    .scroller__inner {
        gap: 18px;
    }
    .logotypes-line {
        margin-top: 20px;
    }
    .logotypes-line img {
        max-height: 110px;
    }
}
  
.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
    90deg,transparent,white 20%, white 80%,transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

@media(max-width: 767px) {
    .scroller[data-animated="true"] {
        -webkit-mask: linear-gradient(
        90deg,transparent,white 10%, white 90%,transparent);
        mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    }
}
  
.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 70s)
    var(--_animation-direction, forwards) linear infinite;
}
  
.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}
  
.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}
  
.scroller {
    --_animation-duration: 70s;
}
  
@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}