.gx-logo-marquee {
    --gx-marquee-duration: 18s;
    --gx-marquee-margin-inline: 0px;
    --gx-marquee-margin-inline-mobile: var(--gx-marquee-margin-inline);
    --gx-marquee-padding-inline: 24px;
    --gx-marquee-fade: 80px;
    --gx-marquee-gap: 48px;
    --gx-marquee-logo-height: 44px;
    --gx-marquee-logo-max-width: 180px;

    position: relative;
    overflow: hidden;
    margin-inline: var(--gx-marquee-margin-inline);
    padding-inline: var(--gx-marquee-padding-inline);
    width: calc(100% - (2 * var(--gx-marquee-margin-inline)));
    box-sizing: border-box;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--gx-marquee-fade),
        #000 calc(100% - var(--gx-marquee-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--gx-marquee-fade),
        #000 calc(100% - var(--gx-marquee-fade)),
        transparent 100%
    );
}

@media (max-width: 991.98px) {
    .gx-logo-marquee {
        margin-inline: var(--gx-marquee-margin-inline-mobile);
        width: calc(100% - (2 * var(--gx-marquee-margin-inline-mobile)));
    }
}

.gx-logo-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: gx-marquee-ltr var(--gx-marquee-duration) linear infinite;
}

.gx-logo-marquee[data-direction="rtl"] .gx-logo-marquee__track {
    animation-direction: reverse;
}

.gx-logo-marquee__group {
    display: inline-flex;
    align-items: center;
    gap: var(--gx-marquee-gap);
    flex: 0 0 auto;
}

.gx-logo-marquee__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gx-logo-marquee__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.gx-logo-marquee__img {
    display: block;
    height: var(--gx-marquee-logo-height);
    width: auto;
    max-width: var(--gx-marquee-logo-max-width);
    object-fit: contain;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
    filter: none;
}

.gx-logo-marquee[data-intrinsic-logo-size="true"] .gx-logo-marquee__img {
    height: auto;
    max-width: none;
    width: auto;
}

.gx-logo-marquee.is-paused .gx-logo-marquee__track {
    animation-play-state: paused;
}

.gx-logo-marquee:not([data-pause-on-hover="false"]):hover .gx-logo-marquee__track,
.gx-logo-marquee:not([data-pause-on-hover="false"]):focus-within .gx-logo-marquee__track {
    animation-play-state: paused;
}

@keyframes gx-marquee-ltr {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gx-logo-marquee__track {
        animation: none;
        transform: none;
    }
}