Featured Post Hero

<!-- The scrim is the component, not decoration: white text over an arbitrary
     photo only clears 4.5:1 once a dark gradient is guaranteed beneath it. -->
<a
  href="#"
  class="group relative flex aspect-[16/9] w-full max-w-4xl items-end overflow-hidden rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-950"
>
  <img
    src="/images/photo-4.jpg"
    alt="Long-exposure highway at night"
    class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 motion-reduce:transform-none"
  />
  <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" aria-hidden="true"></div>
  <div class="relative max-w-xl p-6 sm:p-8">
    <span class="inline-flex rounded-full bg-white/15 px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wide text-white backdrop-blur">
      Featured
    </span>
    <h2 class="mt-3 text-2xl font-bold leading-tight text-white sm:text-4xl">
      What a year of shipping every week taught us about pace
    </h2>
    <p class="mt-2 hidden text-sm leading-relaxed text-gray-200 sm:block">
      Momentum is a system, not a sprint. Here is the loop that kept it going.
    </p>
  </div>
</a>