@layer components{.marquee{flex-direction:column;gap:1.25rem;display:flex;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 clamp(1.5rem,8vw,8rem) calc(100% - clamp(1.5rem,8vw,8rem)),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 clamp(1.5rem,8vw,8rem) calc(100% - clamp(1.5rem,8vw,8rem)),#0000 100%)}.marquee-row{padding-block:.5rem;display:flex;overflow:hidden}.marquee-track{min-inline-size:100%;animation:marquee-x var(--marquee-duration,60s) linear infinite;will-change:transform;flex-shrink:0;gap:1.25rem;padding-inline-end:1.25rem;display:flex}.marquee-track-reverse{animation-direction:reverse}.marquee-item{flex-shrink:0}.marquee[data-paused] .marquee-track,.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}.marquee[data-static]{-webkit-mask-image:none;mask-image:none}.marquee[data-static] .marquee-row{scroll-snap-type:x mandatory;scrollbar-width:thin;padding-inline:var(--gutter);overflow-x:auto}.marquee[data-static] .marquee-track{animation:none}.marquee[data-static] .marquee-item{scroll-snap-align:start}}@keyframes marquee-x{0%{transform:translate(0,0)}to{transform:translate(-100%)}}
