Scroll-Snap Testimonial Carousel

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

  <!-- CSS scroll-snap, no JS. The list is focusable (tabindex) so it can be
       scrolled by keyboard; snap-mandatory settles each card to the edge. -->
  <ul
    tabindex="0"
    aria-label="Customer testimonials, scroll horizontally"
    class="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400"
  >
    <li class="w-full shrink-0 basis-[85%] snap-start sm:basis-[46%] lg:basis-[31%]">
      <figure class="flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <blockquote class="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
          &ldquo;Our error rate dropped by half after we switched.&rdquo;
        </blockquote>
        <figcaption class="mt-5 flex items-center gap-3">
          <span aria-hidden="true" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-500 text-xs font-semibold text-white">MC</span>
          <span class="min-w-0">
            <span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Marcus Chen</span>
            <span class="block truncate text-xs text-gray-500 dark:text-gray-400">CTO, Basepoint</span>
          </span>
        </figcaption>
      </figure>
    </li>
    <!-- Repeat <li> per testimonial. -->
  </ul>
</section>