:root{--size: clamp(10rem, 1rem + 40vmin, 30rem);--gap: calc(var(--size) / 14);--duration: 30s;--scroll-start: 0;--scroll-end: calc(-100% - var(--gap))}.marquee{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;gap:var(--gap);-webkit-mask-image:linear-gradient(var(--mask-direction, to right),hsl(0 0% 0% / 0),hsl(0 0% 0% / 1) 20%,hsl(0 0% 0% / 1) 80%,hsl(0 0% 0% / 0));mask-image:linear-gradient(var(--mask-direction, to right),hsl(0 0% 0% / 0),hsl(0 0% 0% / 1) 20%,hsl(0 0% 0% / 1) 80%,hsl(0 0% 0% / 0))}.marquee__group{flex-shrink:0;display:flex;align-items:center;justify-content:space-around;gap:var(--gap);min-width:100%;animation:scroll-x var(--duration) linear infinite}@media (prefers-reduced-motion: reduce){.marquee__group{animation-play-state:paused}}.marquee--vertical{--mask-direction: to bottom}.marquee--vertical,.marquee--vertical .marquee__group{flex-direction:column}.marquee--vertical .marquee__group{animation-name:scroll-y}.marquee--reverse .marquee__group{animation-direction:reverse;animation-delay:-3s}@keyframes scroll-x{0%{transform:translate(var(--scroll-start))}to{transform:translate(var(--scroll-end))}}@keyframes scroll-y{0%{transform:translateY(var(--scroll-start))}to{transform:translateY(var(--scroll-end))}}.marquee svg,.marquee span.slide{display:grid;place-items:center;width:var(--size);aspect-ratio:16 / 7;padding:0}.marquee span.slide img{max-width:160px;width:100%;height:auto}.marquee--vertical svg{aspect-ratio:1;width:calc(var(--size) / 1.5);padding:calc(var(--size) / 6)}
/*# sourceMappingURL=/cdn/shop/t/273/assets/marquee.css.map */