Responsive Feature Cards Section with CTA

<section class="overflow-hidden border-white/5 border-t relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)">
  <!-- Accent glows -->
  <div class="pointer-events-none absolute inset-0">
    <div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-lime-300/10 blur-3xl"></div>
    <div class="absolute top-1/2 -right-24 h-72 w-72 rounded-full bg-yellow-200/10 blur-3xl"></div>
  </div>

  <div class="max-w-7xl mx-auto px-6 py-20 sm:py-28 relative">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-x-6 gap-y-6">
      <div class="">
        <div class="inline-flex text-xs text-neutral-300 bg-white/5 border-white/10 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center">Our Trails<span class="inline-flex h-1.5 w-1.5 rounded-full bg-lime-300"></span></div>
        <h2 class="mt-4 font-bricolage font-medium tracking-tight text-4xl sm:text-6xl leading-[1.08]">
          Strong trails, thriving hikers.
          <span class="text-neutral-300">Plan, learn, and go.</span>
        </h2>
        <p class="mt-5 text-neutral-400 max-w-2xl">
          From pre-hike prep to on‑trail support, our certified guides and tools keep every journey safe, informed, and memorable.
        </p>
      </div>
      <div class="shrink-0">
        <a href="#" class="inline-flex items-center gap-2 hover:brightness-95 transition text-sm font-medium text-neutral-950 bg-lime-300 rounded-full pt-2 pr-4 pb-2 pl-4">All Trails<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg></a>
      </div>
    </div>

    <!-- Cards -->
    <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
      <!-- Card 1 -->
      <article class="group rounded-3xl bg-white/[0.04] border border-white/10 p-3 sm:p-4 hover:bg-white/[0.06] transition">
        <div class="overflow-hidden rounded-2xl ring-1 ring-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c049d895-ebcc-4385-9561-00bc61050d99_800w.webp" alt="Guide reviewing a route with a hiker" class="sm:h-56 w-full h-48 object-cover">
        </div>
        <div class="pt-4 px-1 pb-1">
          <h3 class="text-[22px] font-medium tracking-tight">Trail Prep Coaching</h3>
          <p class="text-neutral-400 mt-2">
            One‑on‑one planning for gear, weather, nutrition, and route pacing—built for your skill level and goals.
          </p>
          <div class="mt-4 flex items-center justify-between">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 text-xs text-white/70">
              <span class="h-1.5 w-1.5 rounded-full bg-lime-300"></span>
              28 certified guides
            </div>
            <a href="#" class="inline-flex items-center gap-2 text-sm text-white/90">
              Read more
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-lime-300 text-neutral-950">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </a>
          </div>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="group rounded-3xl bg-white/[0.04] border border-white/10 p-3 sm:p-4 hover:bg-white/[0.06] transition">
        <div class="overflow-hidden rounded-2xl ring-1 ring-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/782ff660-820f-4153-aa85-b3d60237bd11_800w.webp" alt="Family hiking together through a pine forest" class="sm:h-56 w-full h-48 object-cover">
        </div>
        <div class="pt-4 px-1 pb-1">
          <h3 class="text-[22px] font-medium tracking-tight">Group &amp; Family Hikes</h3>
          <p class="text-neutral-400 mt-2">
            Guided routes tailored for mixed experience levels with check‑ins, rest points, and kid‑friendly options.
          </p>
          <div class="mt-4 flex items-center justify-between">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 text-xs text-white/70">
              Max 12 hikers/guide
            </div>
            <a href="#" class="inline-flex items-center gap-2 text-sm text-white/90">
              Read more
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-lime-300 text-neutral-950">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </a>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="group rounded-3xl bg-white/[0.04] border border-white/10 p-3 sm:p-4 hover:bg-white/[0.06] transition">
        <div class="overflow-hidden rounded-2xl ring-1 ring-white/10">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/99ccacc8-c39e-4676-badf-74fe58d10b75_800w.webp" alt="Guide assisting a hiker on trail" class="sm:h-56 w-full h-48 object-cover">
        </div>
        <div class="pt-4 px-1 pb-1">
          <h3 class="text-[22px] font-medium tracking-tight">On‑Trail Safety &amp; First Aid</h3>
          <p class="text-neutral-400 mt-2">
            Real‑time support with satellite check‑ins, first‑aid kits, and protocols— of mind on every step.
          </p>
          <div class="mt-4 flex items-center justify-between">
            <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1 text-xs text-white/70">
              4.9 community rating
            </div>
            <a href="#" class="inline-flex items-center gap-2 text-sm text-white/90">
              Read more
              <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-lime-300 text-neutral-950">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-3.5 w-3.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </a>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>