Horizontal Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">What's new</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Latest updates and resources from our team.</p>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
      <article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
        <div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-indigo-100 to-violet-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
        <div class="flex flex-1 flex-col justify-center p-6">
          <span class="inline-block w-fit rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-700">Guide</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Getting started with design tokens</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Learn how to set up and use design tokens to keep your project consistent.</p>
          <a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more &rarr;</a>
        </div>
      </article>

      <article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
        <div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-emerald-100 to-teal-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
        <div class="flex flex-1 flex-col justify-center p-6">
          <span class="inline-block w-fit rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Tutorial</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Responsive layouts without breakpoints</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Use fluid grids and container queries to build layouts that adapt naturally.</p>
          <a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more &rarr;</a>
        </div>
      </article>

      <article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
        <div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-rose-100 to-pink-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
        <div class="flex flex-1 flex-col justify-center p-6">
          <span class="inline-block w-fit rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-700">Case Study</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">How we cut load time by 60%</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">A deep dive into performance optimization with modern CSS and edge caching.</p>
          <a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more &rarr;</a>
        </div>
      </article>

      <article class="group flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] transition hover:shadow-lg sm:flex-row">
        <div class="aspect-[4/3] w-full shrink-0 bg-gradient-to-br from-amber-100 to-orange-100 sm:aspect-auto sm:w-48 lg:w-56"></div>
        <div class="flex flex-1 flex-col justify-center p-6">
          <span class="inline-block w-fit rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Update</span>
          <h3 class="mt-2 text-lg font-semibold text-[var(--ws-cards-text)] group-hover:text-[var(--ws-cards-accent)]">Tailwind v4 migration guide</h3>
          <p class="mt-2 text-sm text-[var(--ws-cards-text-soft)]">Step-by-step instructions for upgrading from v3 to v4 with zero downtime.</p>
          <a href="#" class="mt-4 text-sm font-semibold text-[var(--ws-cards-accent)]">Read more &rarr;</a>
        </div>
      </article>
    </div>
  </div>
</section>