.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee > .marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
  animation: marquee-seamless 22s linear infinite;
}

.marquee-content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: max(100vw, 1260px);
  gap: 28px;
  padding-right: 28px;
}

.marquee-content span,
.marquee-content i {
  flex: none;
  white-space: nowrap;
}

@keyframes marquee-seamless {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 800px) {
  .marquee > .marquee-track { animation-duration: 16s; }
  .marquee-content { min-width: 1260px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee > .marquee-track { animation-play-state: paused; }
}