.scroller {
    max-width: 100%;
    pointer-events: auto;
    overflow: hidden
}

.scroller__inner {
    padding-block:1rem;display: flex;
    flex-wrap: nowrap;
    gap: 1rem
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite;
    animation: scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards
}

.scroller[data-speed="fast"] {
    --_animation-duration: 25s
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s
}

@-webkit-keyframes scroll {
    to {
        transform: translateX(calc(-50% - 0.5rem))
    }
}

@keyframes scroll {
    to {
        transform: translateX(calc(-50% - 0.5rem))
    }
}

.scroller-img {
    max-width: 180px !important;
    max-height: 90px;
    margin: 0 15px;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    transition: filter 0.3s ease;
    pointer-events: auto
}

.scroller-img:hover {
    filter: grayscale(0)
}

@media(max-width: 900px) {
    .scroller-img {
        max-width: 120px !important;
        max-height: 60px;
        margin: 0 15px;
        object-fit: contain;
        display: block;
        filter: grayscale(1);
        transition: filter 0.3s ease
    }
}

@media (max-width: 600px) {
    .scroller__inner {
        padding-block:.5rem}

    .scroller-img {
        max-width: 105px !important;
        max-height: 45px;
        margin: 0 5px;
        object-fit: contain;
        display: block;
        filter: grayscale(1);
        transition: filter 0.3s ease
    }

    .scroller[data-speed="fast"] {
        --_animation-duration: 25s
    }
}