Blog Editorial Split

<section class="ws-blog bg-[var(--ws-blog-bg)] py-16">
  <div class="mx-auto max-w-7xl px-6">

    <div class="mb-10 flex items-center justify-between">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-slate-400">The Keyword</p>
      <a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">View all posts →</a>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">

      <!-- Featured article (takes 2 columns) -->
      <article class="group lg:col-span-2">
        <a href="#" class="block overflow-hidden rounded-2xl">
          <div class="aspect-[16/10] overflow-hidden">
            <img src="https://picsum.photos/seed/blog-feat/900/560" alt="Gemini 2.0 Flash article" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
          </div>
        </a>
        <div class="mt-5">
          <p class="text-xs font-semibold uppercase tracking-[0.15em] text-indigo-400">AI &amp; Research</p>
          <h2 class="mt-2 text-balance text-2xl font-bold leading-snug text-white transition group-hover:text-indigo-300 sm:text-3xl">
            <a href="#">Gemini 2.0 Flash: our fastest and most efficient model yet</a>
          </h2>
          <p class="mt-3 text-sm leading-relaxed text-slate-400">Gemini 2.0 Flash delivers next-generation features and performance at twice the speed of its predecessor — available to all developers today.</p>
          <div class="mt-4 flex items-center gap-3">
            <img src="https://i.pravatar.cc/32?img=11" alt="Google DeepMind Team" class="h-8 w-8 shrink-0 rounded-full object-cover">
            <div class="text-sm">
              <p class="font-medium text-slate-200">Google DeepMind Team</p>
              <p class="text-slate-500">Mar 26, 2026 · 6 min read</p>
            </div>
          </div>
        </div>
      </article>

      <!-- Secondary articles (1 column, 3 stacked with thumbnails) -->
      <div class="flex flex-col gap-5">

        <article class="group flex gap-4">
          <a href="#" class="shrink-0">
            <img src="https://picsum.photos/seed/blog-s1/224/126" alt="Google Search AI article" class="aspect-video w-28 overflow-hidden rounded-xl object-cover transition duration-300 group-hover:scale-105">
          </a>
          <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-emerald-400">Products</p>
            <h3 class="mt-1 text-sm font-semibold leading-snug text-white transition group-hover:text-emerald-300">
              <a href="#">How Google Search uses AI to surface what matters</a>
            </h3>
            <p class="mt-1.5 text-xs text-slate-500">Feb 14 · 4 min</p>
          </div>
        </article>

        <div class="border-t border-slate-800"></div>

        <article class="group flex gap-4">
          <a href="#" class="shrink-0">
            <img src="https://picsum.photos/seed/blog-s2/224/126" alt="AI safety article" class="aspect-video w-28 overflow-hidden rounded-xl object-cover transition duration-300 group-hover:scale-105">
          </a>
          <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-amber-400">Company</p>
            <h3 class="mt-1 text-sm font-semibold leading-snug text-white transition group-hover:text-amber-300">
              <a href="#">Building responsibly: our approach to AI safety in 2026</a>
            </h3>
            <p class="mt-1.5 text-xs text-slate-500">Feb 8 · 5 min</p>
          </div>
        </article>

        <div class="border-t border-slate-800"></div>

        <article class="group flex gap-4">
          <a href="#" class="shrink-0">
            <img src="https://picsum.photos/seed/blog-s3/224/126" alt="Project Astra article" class="aspect-video w-28 overflow-hidden rounded-xl object-cover transition duration-300 group-hover:scale-105">
          </a>
          <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-[0.15em] text-rose-400">Innovation</p>
            <h3 class="mt-1 text-sm font-semibold leading-snug text-white transition group-hover:text-rose-300">
              <a href="#">Project Astra: making AI assistants more helpful in everyday life</a>
            </h3>
            <p class="mt-1.5 text-xs text-slate-500">Jan 30 · 3 min</p>
          </div>
        </article>

      </div>
    </div>
  </div>
</section>