.block-logo-strip__viewport {
    overflow: hidden;
    width: 100%;
    display: flex;
}

.block-logo-strip__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 3rem;
    padding: 1rem 1.5rem;
    margin: 0;
    list-style: none;
}

.block-logo-strip__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.block-logo-strip__link {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.block-logo-strip__img,
.block-logo-strip__item img {
    max-height: 100%;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: opacity 200ms ease, filter 200ms ease;
}

.block-logo-strip--monochrome .block-logo-strip__img,
.block-logo-strip--monochrome .block-logo-strip__item img {
    filter: grayscale(100%);
    opacity: 0.6;
}
.block-logo-strip--monochrome .block-logo-strip__item:hover .block-logo-strip__img,
.block-logo-strip--monochrome .block-logo-strip__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.block-logo-strip--mode-marquee .block-logo-strip__viewport,
.block-logo-strip--mode-scroll-pan .block-logo-strip__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

    .block-logo-strip--mode-marquee .block-logo-strip__track,
    .block-logo-strip--mode-scroll-pan .block-logo-strip__track {
        will-change: transform;
    }

    .block-logo-strip--mode-marquee .block-logo-strip__track {
        animation: lcms-logo-strip-scroll var(--lcms-logo-strip-duration, 40s) linear infinite;
    }

    .block-logo-strip--mode-marquee
        .block-logo-strip__viewport:hover .block-logo-strip__track {
        animation-play-state: paused;
    }
}

.block-logo-strip--speed-slow   { --lcms-logo-strip-duration: 60s; }
.block-logo-strip--speed-medium { --lcms-logo-strip-duration: 40s; }
.block-logo-strip--speed-fast   { --lcms-logo-strip-duration: 25s; }

@media (prefers-reduced-motion: no-preference) {
    @supports not (animation-timeline: view()) {
        .block-logo-strip--mode-scroll-pan .block-logo-strip__track {
            animation: lcms-logo-strip-scroll 40s linear infinite;
        }
        .block-logo-strip--mode-scroll-pan
            .block-logo-strip__viewport:hover .block-logo-strip__track {
            animation-play-state: paused;
        }
    }

    @supports (animation-timeline: view()) {
        .block-logo-strip--mode-scroll-pan {
            view-timeline-name: --lcms-logo-strip-pan;
            view-timeline-axis: block;
        }
        .block-logo-strip--mode-scroll-pan .block-logo-strip__track {
            animation: lcms-logo-strip-scroll auto linear;
            animation-timeline: --lcms-logo-strip-pan;
        }
    }
}

.block-logo-strip--mode-grid .block-logo-strip__viewport {
    justify-content: center;
}

.block-logo-strip--mode-grid .block-logo-strip__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 3rem;
}

@keyframes lcms-logo-strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .block-logo-strip--mode-marquee .block-logo-strip__viewport,
    .block-logo-strip--mode-scroll-pan .block-logo-strip__viewport {
        justify-content: center;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .block-logo-strip--mode-marquee .block-logo-strip__track,
    .block-logo-strip--mode-scroll-pan .block-logo-strip__track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.5rem 3rem;
    }
    .block-logo-strip--mode-marquee .block-logo-strip__track[aria-hidden="true"],
    .block-logo-strip--mode-scroll-pan .block-logo-strip__track[aria-hidden="true"] {
        display: none;
    }
}