@keyframes logo-marquee-scroll {
    to { transform: translateX(-50%); }
}

.logo-marquee {
    width: min(calc(100% - 3rem), var(--max));
    margin: -2rem auto 0;
    padding: .25rem 0 1rem;
    overflow: hidden;
}

.logo-marquee__mask {
    overflow: hidden;
    padding: .5rem 0;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.logo-marquee__track {
    display: flex;
    width: max-content;
    animation: logo-marquee-scroll 28s linear infinite;
}

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

.logo-marquee__set {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 1rem;
}

.logo-marquee__set > span {
    display: grid;
    place-items: center;
    flex: 0 0 122px;
    height: 70px;
    padding: .55rem .7rem;
    border: 1px solid rgba(72,161,201,.18);
    border-radius: .8rem;
    background: rgba(255,255,255,.68);
    box-shadow: 0 5px 18px rgba(9,104,153,.05);
}

.logo-marquee img {
    display: block;
    max-width: 100px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(45%) sepia(92%) saturate(1700%) hue-rotate(166deg) brightness(95%) contrast(101%);
    opacity: .9;
}

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

@media (max-width: 640px) {
    .logo-marquee { width: min(calc(100% - 2rem), var(--max)); margin-top: -1.2rem; }
    .logo-marquee__set > span { flex-basis: 108px; height: 62px; }
}