Responsive Animated Card Grid for Blog Posts

<div class="lg:px-8 max-w-7xl mx-auto px-6 min-h-[100svh] flex items-center justify-center">
  <!-- Card 1 -->
  <article
    class="group overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition backdrop-blur">
    <div class="[animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
      <div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30dd5951-eeb5-4b75-ab70-4c9de46effb5_800w.webp" alt="Fuse — Multi-Agent Layer (Beta)" class="h-full w-full object-cover" style="filter: grayscale(100%);">
        <div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
      </div>
      <div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
        May 6, 2025
      </div>
      <h3 class="mt-2 text-xl font-medium tracking-tight text-white">
        Fuse — Multi-Agent Layer (Beta)
      </h3>
      <p class="mt-2 text-sm text-white/60 leading-relaxed">
        Coordinate multiple AI agents seamlessly with our new
        orchestration layer for complex workflows.
      </p>
    </div>
  </article>

  <!-- Card 2 -->
  <article
    class="group overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition backdrop-blur">
    <div class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
      <div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa91f7af-c0ee-487e-9b71-34905a5f7414_800w.webp" alt="Low-Latency Mode for Inference API" class="h-full w-full object-cover" style="filter: grayscale(100%);">
        <div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
      </div>
      <div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
        Apr 29, 2025
      </div>
      <h3 class="mt-2 text-xl font-medium tracking-tight text-white">
        Low-Latency Mode for Inference API
      </h3>
      <p class="mt-2 text-sm text-white/60 leading-relaxed">
        Experience 40% faster response times with our optimized
        inference pipeline for real-time applications.
      </p>
    </div>
  </article>

  <!-- Card 3 -->
  <article
    class="group overflow-hidden hover:bg-white/[0.06] transition border-white/10 border rounded-2xl backdrop-blur">
    <div class="[animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
      <div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/05c76ddb-2184-4dd8-8e7d-3465ddde84ea_800w.webp" alt="Code Interpreter — Run Python in Chat" class="h-full w-full object-cover" style="filter: grayscale(100%);">
        <div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
      </div>
      <div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
        Apr 1, 2025
      </div>
      <h3 class="mt-2 text-xl font-medium tracking-tight text-white">
        Code Interpreter — Run Python in Chat
      </h3>
      <p class="mt-2 text-sm text-white/60 leading-relaxed">
        Execute Python code directly in conversations with secure
        sandboxing and instant visualization support.
      </p>
    </div>
  </article>
</div>