Blog Scroll Carousel

<section class="ws-blog bg-[var(--ws-blog-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
      <div class="max-w-2xl">
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Featured Rail</p>
        <h2 class="mt-3 text-3xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-4xl">Highlighted reads</h2>
        <p class="mt-3 text-base text-[var(--ws-blog-text-soft)]">A horizontal rail for curated stories, powered by native CSS scroll snap.</p>
      </div>
      <div class="text-sm text-[var(--ws-blog-text-muted)]">Swipe or trackpad-scroll</div>
    </div>

    <div class="-mx-6 mt-10 overflow-x-auto px-6 pb-2 [scrollbar-width:none]">
      <div class="flex gap-5 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden">
        <article class="group w-[min(320px,82vw)] flex-none snap-start">
          <a href="#" class="block">
            <div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-indigo-100 to-purple-100 transition duration-300 group-hover:scale-105"></div>
            </div>
            <div class="mt-4">
              <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Registry</span>
              <h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie eine Registry fuer Menschen und Agents gleichermassen lesbar wird</h3>
              <div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">21. Maerz 2026 · 9 Min</div>
            </div>
          </a>
        </article>

        <article class="group w-[min(320px,82vw)] flex-none snap-start">
          <a href="#" class="block">
            <div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-emerald-100 to-teal-100 transition duration-300 group-hover:scale-105"></div>
            </div>
            <div class="mt-4">
              <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Effects</span>
              <h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Scroll-, Hover- und Lighting-Demos richtig visualisieren</h3>
              <div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">18. Maerz 2026 · 6 Min</div>
            </div>
          </a>
        </article>

        <article class="group w-[min(320px,82vw)] flex-none snap-start">
          <a href="#" class="block">
            <div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-amber-100 to-orange-100 transition duration-300 group-hover:scale-105"></div>
            </div>
            <div class="mt-4">
              <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Content</span>
              <h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Startseiten so schreiben, dass die Anwendung sofort verstanden wird</h3>
              <div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">13. Maerz 2026 · 7 Min</div>
            </div>
          </a>
        </article>

        <article class="group w-[min(320px,82vw)] flex-none snap-start">
          <a href="#" class="block">
            <div class="aspect-square overflow-hidden rounded-[1.35rem] bg-[var(--ws-blog-card-bg)]">
              <div class="h-full w-full bg-gradient-to-br from-sky-100 to-cyan-100 transition duration-300 group-hover:scale-105"></div>
            </div>
            <div class="mt-4">
              <span class="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--ws-blog-accent)]">Workflow</span>
              <h3 class="mt-2 text-xl font-semibold leading-snug text-[var(--ws-blog-text)] transition group-hover:text-[var(--ws-blog-accent)]">Wie man aus einem TODO echte Registry-Inhalte macht</h3>
              <div class="mt-2 text-sm text-[var(--ws-blog-text-muted)]">9. Maerz 2026 · 5 Min</div>
            </div>
          </a>
        </article>
      </div>
    </div>
  </div>
</section>