Horizontal Scroll Snap

<div class="nuda-scx-hscroll__track">
  <div class="nuda-scx-hscroll__slide">
    <span class="nuda-scx-hscroll__lbl">01</span>
  </div>
  <div class="nuda-scx-hscroll__slide">
    <span class="nuda-scx-hscroll__lbl">02</span>
  </div>
  <div class="nuda-scx-hscroll__slide">
    <span class="nuda-scx-hscroll__lbl">03</span>
  </div>
  <div class="nuda-scx-hscroll__slide">
    <span class="nuda-scx-hscroll__lbl">04</span>
  </div>
</div>

.nuda-scx-hscroll {
  width: 100%;
  overflow: hidden;
}

.nuda-scx-hscroll__track {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: .25rem .5rem;
  animation: _nuda-scxHPeek 3s ease-in-out infinite;
}

.nuda-scx-hscroll__track::-webkit-scrollbar {
  display: none;
}

.nuda-scx-hscroll__slide {
  flex: 0 0 80px;
  height: 72px;
  border-radius: 10px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.08);
}

.nuda-scx-hscroll__slide--1 {
  background: linear-gradient(135deg,#1e1e1e,#2a2a2a);
}

.nuda-scx-hscroll__slide--2 {
  background: linear-gradient(135deg,#1a1f14,#232e18);
}

.nuda-scx-hscroll__slide--3 {
  background: linear-gradient(135deg,#1e1a1a,#2e2020);
}

.nuda-scx-hscroll__slide--4 {
  background: linear-gradient(135deg,#141a1e,#182028);
}

.nuda-scx-hscroll__lbl {
  color: #555;
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nuda-scx-hscroll__hint {
  text-align: center;
  color: #444;
  font-size: .65rem;
  margin-top: .35rem;
  letter-spacing: .05em;
}

@keyframes _nuda-scxHPeek {
  0%,100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-30px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-scx-hscroll__track {
    animation: none;
  }
}