Masonry Testimonial Wall

<section class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6">
  <h2 class="mb-8 text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    From the wall
  </h2>

  <!-- CSS multi-column masonry: variable-height quotes flow down each column.
       break-inside-avoid keeps a card from splitting across a column break. -->
  <div class="columns-1 gap-4 sm:columns-2 lg:columns-3">
    <figure class="mb-4 break-inside-avoid rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
      <blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">
        &ldquo;We shipped in a week what used to take a quarter. The team stopped fighting the tooling and started building.&rdquo;
      </blockquote>
      <figcaption class="mt-4 flex items-center gap-3">
        <span aria-hidden="true" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-500 text-xs font-semibold text-white">AO</span>
        <span class="min-w-0">
          <span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Amara Okafor</span>
          <span class="block truncate text-xs text-gray-500 dark:text-gray-400">Head of Operations, Northwind</span>
        </span>
      </figcaption>
    </figure>
    <!-- Repeat <figure> per testimonial; mix short and long quotes. -->
  </div>
</section>