Gallery Masonry

<section class="ws-gallery bg-[var(--ws-gallery-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 uppercase tracking-[0.18em] text-[var(--ws-gallery-text)]">Portfolio</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Selected projects</h2>
    </div>

    <div class="mt-12 columns-1 gap-4 space-y-4 sm:columns-2 lg:columns-3">
      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[4/5] bg-gradient-to-br from-indigo-200 to-purple-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[4/3] bg-gradient-to-br from-emerald-200 to-teal-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-square bg-gradient-to-br from-amber-200 to-orange-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[3/4] bg-gradient-to-br from-rose-200 to-pink-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[4/3] bg-gradient-to-br from-sky-200 to-cyan-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[3/5] bg-gradient-to-br from-violet-200 to-fuchsia-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-square bg-gradient-to-br from-lime-200 to-green-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[4/3] bg-gradient-to-br from-slate-200 to-zinc-300 transition duration-300 group-hover:scale-105"></div>
      </a>

      <a href="#" class="group block overflow-hidden rounded-xl">
        <div class="aspect-[3/4] bg-gradient-to-br from-orange-200 to-red-300 transition duration-300 group-hover:scale-105"></div>
      </a>
    </div>
  </div>
</section>