.logo-marquee{--height:100px;--gap:0px;--bg:#000;--shadow:none;margin-inline:0;position:relative;width:100%}.logo-marquee__viewport{background:var(--bg);box-shadow:var(--shadow);height:var(--height);overflow:hidden;position:relative}.logo-marquee__viewport:after,.logo-marquee__viewport:before{background:linear-gradient(to right,var(--bg) 0,transparent 100%);content:"";inset-block:0;pointer-events:none;position:absolute;width:clamp(36px,10%,140px);z-index:2}.logo-marquee__viewport:before{left:0}.logo-marquee__viewport:after{right:0;transform:scaleX(-1)}.logo-marquee__track{animation:marquee var(--duration,40s) linear infinite;display:flex;gap:var(--gap);width:max-content;will-change:transform}.logo-marquee__item{align-items:center;display:inline-flex;height:var(--height);justify-content:center;min-width:250px;padding-inline:0}.logo-marquee__item img{display:block;filter:grayscale(1) brightness(0) invert(1);height:calc(var(--height));opacity:.9;transition:filter .2s ease,transform .2s ease,opacity .2s ease;width:auto}.logo-marquee__item:focus img,.logo-marquee__item:hover img{opacity:1;transform:scale(1.02)}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.logo-marquee:focus-within .logo-marquee__track,.logo-marquee__viewport:hover .logo-marquee__track{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.logo-marquee__track{animation:none}}