Event Cards

<section class="ws-cards bg-[var(--ws-cards-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-cards-text)] sm:text-4xl">Upcoming events</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-cards-text-soft)]">Don't miss what's coming next.</p>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
      <!-- Event 1 -->
      <article class="flex gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-5 transition hover:shadow-md">
        <div class="flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-indigo-100 text-indigo-700">
          <span class="text-xs font-semibold uppercase">Mar</span>
          <span class="text-lg font-bold leading-tight">28</span>
        </div>
        <div class="min-w-0 flex-1">
          <h3 class="text-sm font-semibold text-[var(--ws-cards-text)]">Design Systems Conference</h3>
          <p class="mt-1 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 0115 0z"/></svg>
            Berlin, Germany
          </p>
          <p class="mt-0.5 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            9:00 AM – 5:00 PM
          </p>
          <a href="#" class="mt-3 inline-block rounded-lg bg-[var(--ws-cards-accent)] px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">RSVP</a>
        </div>
      </article>

      <!-- Event 2 -->
      <article class="flex gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-5 transition hover:shadow-md">
        <div class="flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-emerald-100 text-emerald-700">
          <span class="text-xs font-semibold uppercase">Apr</span>
          <span class="text-lg font-bold leading-tight">05</span>
        </div>
        <div class="min-w-0 flex-1">
          <h3 class="text-sm font-semibold text-[var(--ws-cards-text)]">Frontend Workshop</h3>
          <p class="mt-1 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 0115 0z"/></svg>
            Online (Zoom)
          </p>
          <p class="mt-0.5 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            2:00 PM – 4:00 PM
          </p>
          <a href="#" class="mt-3 inline-block rounded-lg bg-[var(--ws-cards-accent)] px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">RSVP</a>
        </div>
      </article>

      <!-- Event 3 -->
      <article class="flex gap-4 rounded-xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-5 transition hover:shadow-md">
        <div class="flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-rose-100 text-rose-700">
          <span class="text-xs font-semibold uppercase">Apr</span>
          <span class="text-lg font-bold leading-tight">12</span>
        </div>
        <div class="min-w-0 flex-1">
          <h3 class="text-sm font-semibold text-[var(--ws-cards-text)]">Product Launch Party</h3>
          <p class="mt-1 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 0115 0z"/></svg>
            Munich, Germany
          </p>
          <p class="mt-0.5 flex items-center gap-1 text-xs text-[var(--ws-cards-text-soft)]">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            7:00 PM – 11:00 PM
          </p>
          <a href="#" class="mt-3 inline-block rounded-lg bg-[var(--ws-cards-accent)] px-3 py-1.5 text-xs font-semibold text-white transition hover:opacity-90">RSVP</a>
        </div>
      </article>
    </div>
  </div>
</section>