.logo-marquee {
    --logo-height: 72px;
    --logo-gap: 48px;
    --logo-align: center;
    --logo-justify: center;
    --logo-box-width: auto;
    --logo-fit: contain;
    --logo-opacity: 0.65;
    --logo-pad-top: 0px;
    --logo-pad-right: 0px;
    --logo-pad-bottom: 0px;
    --logo-pad-left: 0px;
    --fade-size: 64px;
    --zoom-strength: 1.12;
    --zoom-range: 40%;
    --zoom-bleed: calc(((var(--zoom-strength) - 1) * var(--logo-height) * 0.5) + 8px);
    --marquee-distance: 0px;
    --marquee-duration: 1s;
}

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

.logo-marquee[data-center-zoom="yes"] .logo-marquee__viewport {
    padding-block: var(--zoom-bleed);
    margin-block: calc(var(--zoom-bleed) * -1);
}

.logo-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.logo-marquee__sequence {
    display: flex;
    flex: 0 0 auto;
    align-items: var(--logo-align);
    gap: var(--logo-gap);
    min-width: max-content;
    padding-inline-end: var(--logo-gap);
}

.logo-marquee__sequence[aria-hidden="true"] {
    pointer-events: none;
}

.logo-marquee__item {
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--logo-box-width);
    align-items: center;
    justify-content: var(--logo-justify);
    min-height: var(--logo-height);
    padding: var(--logo-pad-top) var(--logo-pad-right) var(--logo-pad-bottom) var(--logo-pad-left);
    transform: scale(var(--item-scale, 1));
    transform-origin: center center;
    transition: transform 0.2s ease;
}

.logo-marquee__item-link {
    display: inline-flex;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
}

.logo-marquee__item-link:focus-visible,
.logo-marquee__item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.logo-marquee__item img,
.logo-marquee__item picture,
.logo-marquee__item-link img,
.logo-marquee__item-link picture {
    display: block;
}

.logo-marquee__item img,
.logo-marquee__item-link img {
    width: var(--logo-box-width) !important;
    min-width: 0;
    max-width: 100% !important;
    height: var(--logo-height) !important;
    min-height: var(--logo-height) !important;
    max-height: var(--logo-height) !important;
    object-fit: var(--logo-fit);
    opacity: var(--logo-opacity);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.logo-marquee[data-monochrome="yes"] .logo-marquee__item img,
.logo-marquee[data-monochrome="yes"] .logo-marquee__item-link img {
    filter: grayscale(1);
}

.logo-marquee[data-monochrome="yes"][data-monochrome-hover="yes"] .logo-marquee__item:hover img,
.logo-marquee[data-monochrome="yes"][data-monochrome-hover="yes"] .logo-marquee__item:focus-visible img,
.logo-marquee[data-monochrome="yes"][data-monochrome-hover="yes"] .logo-marquee__item-link:hover img,
.logo-marquee[data-monochrome="yes"][data-monochrome-hover="yes"] .logo-marquee__item-link:focus-visible img {
    filter: none;
}

.logo-marquee[data-edge-fade="yes"] .logo-marquee__viewport {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--fade-size),
        black calc(100% - var(--fade-size)),
        transparent 100%
    );
}

.logo-marquee__item:hover img,
.logo-marquee__item:focus-visible img,
.logo-marquee__item-link:hover img,
.logo-marquee__item-link:focus-visible img {
    opacity: 1;
}

.logo-marquee[data-center-zoom="yes"] .logo-marquee__item {
    --item-scale: calc(1 + (var(--zoom-strength) - 1) * var(--center-progress, 0));
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee__item {
        transition: none;
        transform: none;
    }
}

.logo-marquee[data-autoplay="yes"][data-pause-on-hover="yes"] .logo-marquee__viewport:hover .logo-marquee__track,
.logo-marquee[data-autoplay="yes"][data-pause-on-hover="yes"] .logo-marquee__viewport:focus-within .logo-marquee__track {
    animation-play-state: paused;
}

.logo-marquee[data-autoplay="yes"].is-ready.logo-marquee--left .logo-marquee__track {
    animation: logo-marquee-left var(--marquee-duration) linear infinite;
}

.logo-marquee[data-autoplay="yes"].is-ready.logo-marquee--right .logo-marquee__track {
    animation: logo-marquee-right var(--marquee-duration) linear infinite;
}

@keyframes logo-marquee-left {
    from {
        transform: translate3d(0, 0, 0);
    }

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

@keyframes logo-marquee-right {
    from {
        transform: translate3d(calc(var(--marquee-distance) * -1), 0, 0);
    }

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