Responsive News Article Grid with Featured Story

<section class="sm:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
  <div class="py-12 sm:py-16">
    <!-- Featured Article -->
    <article
      class="mb-12 rounded-3xl overflow-hidden bg-white border border-black/5 hover:shadow-xl transition-all duration-300">
      <div class="grid lg:grid-cols-2 gap-0">
        <div class="relative">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/90daf43d-8c04-45d9-9051-7d3565c3aa2f_1600w.jpg" alt="Central bank signals cautious path ahead" class="w-full h-[300px] lg:h-[400px] object-cover" style="">
          <div
            class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-700 text-xs border border-emerald-500/20 font-geist"
            style="">Featured Analysis</div>
        </div>
        <div class="p-8 lg:p-12 flex flex-col justify-center">
          <h3 class="lg:text-3xl text-2xl font-bold text-black tracking-tight font-playfair mb-4" style="">Central bank
            signals cautious path ahead</h3>
          <p class="text-lg text-black/60 font-geist mb-6" style="">Markets surge as policymakers emphasize data‑driven
            decisions, signaling potential shifts in monetary policy that could reshape global economic trends.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm text-black/50">
              <span class="inline-flex items-center gap-1 font-geist" style="">
                    <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="clock" class="lucide lucide-clock w-4 h-4"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                    8 min read
                  </span>
              <span class="font-geist" style="">•</span>
              <span class="font-geist" style="">2h ago</span>
            </div>
            <button class="inline-flex items-center justify-center h-10 w-10 rounded-xl border border-black/5 bg-white text-black/70 hover:bg-black/5 transition" aria-label="Save article">
                  <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="bookmark-plus" class="lucide lucide-bookmark-plus w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class=""></path><line x1="12" x2="12" y1="7" y2="13" class=""></line><line x1="15" x2="9" y1="10" y2="10" class=""></line></svg>
                </button>
          </div>
        </div>
      </div>
    </article>

    <!-- Article Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Article 2 -->
      <article
        class="group rounded-3xl overflow-hidden bg-white border border-black/5 hover:shadow-xl transition-all duration-300">
        <div class="relative">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b09edb96-3dec-42df-a853-a26504074cdc_800w.jpg" alt="Major tech conference spotlights AI safety" class="w-full h-64 object-cover" style="">
          <div
            class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full bg-black text-white text-xs font-geist"
            style="">Exclusive</div>
          <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/80 border border-black/5 text-black/70 hover:text-black hover:bg-white transition" aria-label="Save article">
        <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="bookmark-plus" class="lucide lucide-bookmark-plus w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class=""></path><line x1="12" x2="12" y1="7" y2="13" class=""></line><line x1="15" x2="9" y1="10" y2="10" class=""></line></svg>
      </button>
        </div>
        <div class="p-6">
          <h3 class="text-2xl font-bold text-black tracking-tight font-playfair mb-3" style="">Major tech conference
            spotlights AI safety</h3>
          <p class="text-base text-black/60 font-geist mb-4" style="">Leaders agree on standards as new models debut.
          </p>
          <div class="flex items-center gap-4 text-sm text-black/50">
            <span class="inline-flex items-center gap-1 font-geist" style="">
          <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="clock" class="lucide lucide-clock w-4 h-4"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
          6 min read
        </span>
            <span class="font-geist" style="">•</span>
            <span class="font-geist" style="">1h ago</span>
          </div>
        </div>
      </article>

      <!-- Article 3 -->
      <article
        class="group rounded-3xl overflow-hidden bg-white border border-black/5 hover:shadow-xl transition-all duration-300">
        <div class="relative">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4c5e0f68-9177-47ca-8112-0432df616b78_800w.jpg" alt="Inside the race to build greener cities" class="w-full h-64 object-cover" style="">
          <div
            class="absolute top-4 left-4 inline-flex items-center px-3 py-1.5 rounded-full bg-rose-500/10 text-rose-700 text-xs border border-rose-500/20 font-geist"
            style="">Opinion</div>
          <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/80 border border-black/5 text-black/70 hover:text-black hover:bg-white transition" aria-label="Save article">
        <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="bookmark-plus" class="lucide lucide-bookmark-plus w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class=""></path><line x1="12" x2="12" y1="7" y2="13" class=""></line><line x1="15" x2="9" y1="10" y2="10" class=""></line></svg>
      </button>
        </div>
        <div class="p-6">
          <h3 class="text-2xl font-bold text-black tracking-tight font-playfair mb-3" style="">Inside the race to build
            greener cities</h3>
          <p class="text-base text-black/60 font-geist mb-4" style="">Designing resilient infrastructure for a changing
            climate.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm text-black/50">
              <span class="font-geist" style="">By L. Chen</span>
              <span class="font-geist" style="">•</span>
              <span class="font-geist" style="">9 min read</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Article 4 -->
      <article
        class="group rounded-3xl overflow-hidden bg-white border border-black/5 hover:shadow-xl transition-all duration-300">
        <div class="relative">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c400061e-82c2-4351-af3d-3b4ddf196917_800w.jpg" alt="Launch day: a new era for small rockets" class="w-full h-64 object-cover" style="">
          <button class="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/80 border border-black/5 text-black/70 hover:text-black hover:bg-white transition" aria-label="Save article">
        <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="bookmark-plus" class="lucide lucide-bookmark-plus w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class=""></path><line x1="12" x2="12" y1="7" y2="13" class=""></line><line x1="15" x2="9" y1="10" y2="10" class=""></line></svg>
      </button>
        </div>
        <div class="p-6">
          <h3 class="text-2xl font-bold text-black tracking-tight font-playfair mb-3" style="">Launch day: a new era for
            small rockets</h3>
          <p class="text-base text-black/60 font-geist mb-4" style="">Cheaper rides to orbit are changing who gets to
            build in space.</p>
          <div class="flex items-center gap-4 text-sm text-black/50">
            <span class="font-geist" style="">By Staff</span>
            <span class="font-geist" style="">•</span>
            <span class="font-geist" style="">5 min read</span>
          </div>
        </div>
      </article>
    </div>

    <!-- Load More -->
    <div class="mt-12 text-center">
      <button class="inline-flex items-center gap-2 h-12 px-6 rounded-xl border border-black/5 bg-white text-black/70 hover:bg-black/5 transition font-geist" style="">
            Load more stories
            <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="chevron-down" class="lucide lucide-chevron-down w-4 h-4"><path d="m6 9 6 6 6-6" class=""></path></svg>
          </button>
    </div>
  </div>
</section>