<div class="gl-ss">
  <div class="gl-ss-track">
    <article class="gl-ss-pane gl-ss-1">
      <strong>Slide 01</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-2">
      <strong>Slide 02</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-3">
      <strong>Slide 03</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-4">
      <strong>Slide 04</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-5">
      <strong>Slide 05</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
  </div>
  <p class="gl-ss-hint">← swipe / scroll horizontally →</p>
</div>

.gl-ss {
  display: flex; flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(251,146,60,0.16), transparent 60%),
    #1a0e06;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff7ed;
  box-sizing: border-box;
  justify-content: center;
}
.gl-ss-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70%, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.gl-ss-pane {
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 24px 22px;
  min-height: 280px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.gl-ss-pane strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-ss-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: #1a0e06;
  background: rgba(255,247,237,0.85);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.gl-ss-1 { background: linear-gradient(135deg, #fb923c, #f97316); }
.gl-ss-2 { background: linear-gradient(135deg, #f97316, #ea580c); }
.gl-ss-3 { background: linear-gradient(135deg, #ea580c, #c2410c); }
.gl-ss-4 { background: linear-gradient(135deg, #fbbf24, #fb923c); }
.gl-ss-5 { background: linear-gradient(135deg, #c2410c, #9a3412); }
.gl-ss-hint {
  margin: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: #fb923c;
}
.gl-ss-track::-webkit-scrollbar { height: 6px; }
.gl-ss-track::-webkit-scrollbar-track { background: rgba(251,146,60,0.1); border-radius: 999px; }
.gl-ss-track::-webkit-scrollbar-thumb { background: rgba(251,146,60,0.4); border-radius: 999px; }