Bento Image Grid

<section class="ws-bento bg-[var(--ws-bento-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold text-[var(--ws-bento-text)]">Visual showcase</p>
      <h2 class="mt-2 text-3xl font-bold tracking-tight text-[var(--ws-bento-text)] sm:text-4xl">Explore our work</h2>
      <p class="mt-4 text-lg text-[var(--ws-bento-text-soft)]">A curated collection of our latest projects and creative endeavors.</p>
    </div>

    <div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Large landscape card: spans 2 columns -->
      <a href="#" class="group relative overflow-hidden rounded-2xl sm:col-span-2 transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex aspect-[2/1] items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-16 w-16 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Brand Campaign</h3>
          <p class="mt-1 text-sm text-slate-300">Photography &middot; 2024</p>
        </div>
      </a>

      <!-- Portrait card: spans 2 rows -->
      <a href="#" class="group relative row-span-2 overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex h-full min-h-[24rem] items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-16 w-16 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Editorial Series</h3>
          <p class="mt-1 text-sm text-slate-300">Portrait &middot; 2024</p>
        </div>
      </a>

      <!-- Standard card -->
      <a href="#" class="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex aspect-square items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-12 w-12 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Product Shots</h3>
          <p class="mt-1 text-sm text-slate-300">Commercial &middot; 2024</p>
        </div>
      </a>

      <!-- Standard card -->
      <a href="#" class="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex aspect-square items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-12 w-12 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Urban Landscapes</h3>
          <p class="mt-1 text-sm text-slate-300">Architecture &middot; 2023</p>
        </div>
      </a>

      <!-- Wide landscape card: spans 2 columns -->
      <a href="#" class="group relative overflow-hidden rounded-2xl sm:col-span-2 transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex aspect-[3/1] items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-16 w-16 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Aerial Perspectives</h3>
          <p class="mt-1 text-sm text-slate-300">Drone &middot; 2023</p>
        </div>
      </a>

      <!-- Standard card -->
      <a href="#" class="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:shadow-xl hover:scale-[1.02]">
        <div class="flex aspect-[4/3] items-center justify-center bg-[var(--ws-bento-card-bg)]">
          <svg class="h-12 w-12 text-[var(--ws-bento-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" /></svg>
        </div>
        <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-900/80 to-transparent p-6">
          <h3 class="text-lg font-semibold text-white">Street Stories</h3>
          <p class="mt-1 text-sm text-slate-300">Documentary &middot; 2023</p>
        </div>
      </a>
    </div>
  </div>
</section>