.sale-marquee { --marquee-bg: #01203F; --marquee-text: #ffffff; --marquee-accent: #ffd43b; --marquee-gap: 33.91px; background: var(--marquee-bg); color: var(--marquee-text); overflow: hidden; width: 100%; padding: 8px 0; } .sale-marquee__track { display: flex; width: max-content; animation: sale-marquee-scroll var(--marquee-duration, 30s) linear infinite; } .sale-marquee:hover .sale-marquee__track { animation-play-state: paused; } .sale-marquee__group { display: flex; flex-shrink: 0; } .sale-marquee__item { display: inline-flex; align-items: center; gap: 18px; margin-right: var(--marquee-gap); white-space: nowrap; font-family: "Open Sans", system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height:16.5px; letter-spacing: 3.08px; text-transform: uppercase; } .sale-marquee__icon { color: var(--marquee-accent); flex-shrink: 0; } @keyframes sale-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(var(--marquee-shift, 50%) * -1)); } } @media (max-width: 767px) { .sale-marquee__item { font-size: 12px; letter-spacing: 0.22em; } .sale-marquee { --marquee-gap: 56px; padding: 12px 0; } } @media (prefers-reduced-motion: reduce) { .sale-marquee__track { animation: none; } }