Scroll-Snap Gallery

<div class="snap"><div class="snap-i" style="background:linear-gradient(135deg,#ff7a18,#ff477e)">1</div><div class="snap-i" style="background:linear-gradient(135deg,#5b6cff,#00d4ff)">2</div><div class="snap-i" style="background:linear-gradient(135deg,#16a34a,#a3e635)">3</div><div class="snap-i" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">4</div></div>
<p class="snap-hint">Scroll horizontally → snaps to each panel</p>

body{background:#0d1426;flex-direction:column;gap:14px}
.snap{display:flex;gap:14px;width:320px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.snap::-webkit-scrollbar{height:6px}.snap::-webkit-scrollbar-thumb{background:#33415c;border-radius:3px}
.snap-i{flex:none;width:240px;height:160px;scroll-snap-align:center;border-radius:18px;display:grid;place-items:center;color:#fff;font:800 40px/1 system-ui,sans-serif}
.snap-hint{color:#8a93ad;font:500 13px/1 system-ui,sans-serif}