.pf-marquee {
  --pf-speed: 48s;
  --pf-size: 120px;
  --pf-color: #24364f;
  --pf-opacity: 0.32;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-size: var(--pf-size);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pf-color);
  opacity: var(--pf-opacity);
}
.pf-marquee .pf-track { display: flex; width: max-content; }
.pf-marquee .pf-track > * { flex: 0 0 auto; }
.pf-marquee.is-on .pf-track { animation: pf-marquee var(--pf-speed) linear infinite; }
@keyframes pf-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pf-marquee.is-on .pf-track { animation: none; transform: none; }
}