.winn-logos-marquee {
    --logo-gap: 32px;
    --marquee-duration: 34s;
    --logo-item-width: 160px;
    --logo-max-height: 72px;
    --scroll-distance: 0px;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

.winn-logos-marquee__viewport {
    width: 100%;
    overflow: hidden;
}

.winn-logos-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    width: max-content;
    min-width: max-content;
    will-change: transform;
    animation: winnLogosMarquee var(--marquee-duration) linear infinite;
}

.winn-logos-marquee.is-reverse .winn-logos-marquee__track {
    animation-name: winnLogosMarqueeReverse;
}

.winn-logos-marquee.is-pause-on-hover:hover .winn-logos-marquee__track {
    animation-play-state: paused;
}

.winn-logos-marquee__item {
    flex: 0 0 var(--logo-item-width);
    min-width: var(--logo-item-width);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.winn-logos-marquee__item img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--logo-max-height);
    object-fit: contain;
}
.winn-logos-marquee.is-gray-logos .winn-logos-marquee__item img {
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.winn-logos-marquee.is-gray-logos .winn-logos-marquee__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.winn-logos-marquee.is-gray-logos .winn-logos-marquee__item:focus img,
.winn-logos-marquee.is-gray-logos .winn-logos-marquee__item:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
}
@keyframes winnLogosMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--scroll-distance)), 0, 0);
    }
}

@keyframes winnLogosMarqueeReverse {
    from {
        transform: translate3d(calc(-1 * var(--scroll-distance)), 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 1024px) {
    .winn-logos-marquee {
        --logo-gap: 24px;
        --marquee-duration: 28s;
        --logo-item-width: 130px;
        --logo-max-height: 58px;
    }
}

@media (max-width: 767px) {
    .winn-logos-marquee {
        --logo-gap: 18px;
        --marquee-duration: 22s;
        --logo-item-width: 100px;
        --logo-max-height: 46px;
    }
}