Blog Post Grid

<section class="mx-auto w-full max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
  <h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    From the blog
  </h2>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
    Notes on building, designing and shipping.
  </p>

  <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <!-- Repeat this article per post. -->
    <article class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
      <a href="#" class="aspect-[16/10] overflow-hidden bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:bg-gray-800">
        <img src="/images/photo-3.jpg" alt="Whiteboard covered in system diagrams" loading="lazy" class="h-full w-full object-cover" />
      </a>
      <div class="flex flex-1 flex-col p-5">
        <span class="text-xs font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Design</span>
        <h3 class="mt-2 text-base font-semibold leading-snug text-gray-900 dark:text-gray-100">
          <a href="#" class="focus-visible:outline-none focus-visible:underline hover:underline">
            The quiet power of consistent spacing
          </a>
        </h3>
        <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
          A four-point scale removed most of our layout debates overnight.
        </p>
        <div class="mt-4 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-500">
          <time datetime="2026-07-08">Jul 8, 2026</time>
          <span aria-hidden="true">&middot;</span>
          <span>5 min read</span>
        </div>
      </div>
    </article>
  </div>
</section>