.marquee {
  background:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 3px 0 var(--orange);
}
.marquee-track {
  display:flex;
  animation:scroll 30s linear infinite;
  width:max-content;
  padding:11px 0;
}
.marquee:hover .marquee-track { animation-play-state:paused }
.marquee-item {
  font-family:var(--font-display);
  font-size:16px;
  color:var(--white);
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 22px;
  text-transform:uppercase;
  letter-spacing:-0.3px;
  white-space:nowrap;
}
.marquee-item::after {
  content:'';
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.marquee-item.alt { color:var(--yellow) }
.marquee-item.alt::after { background:var(--yellow) }
@keyframes scroll {
  to { transform:translateX(-50%) }
}