Dynamic Grid Row Heights Fixer

<!-- Responsive Bento Layout Grid with Row Height Constraints -->
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[minmax(160px,_auto)] grid-flow-row-dense w-full">
  <!-- Dynamic Card 1: Expands based on Content Aspect -->
  <div className="row-span-2 col-span-2 p-6 bg-zinc-950 border border-zinc-90 w-full rounded-2xl flex flex-col justify-between overflow-hidden relative">
    <div>
      <span className="text-[10px] text-emerald-400 font-mono tracking-widest uppercase">Dynamic Spotlight Card</span>
      <h3 className="text-lg font-bold text-zinc-100 mt-2">Responsive Aspect Height Node</h3>
      <p className="text-xs text-zinc-400 mt-2 leading-relaxed">
        This card uses auto-rows with a base of 160px to scale nicely with text volumes without clipping or overflows.
      </p>
    </div>
    <!-- Symmetrical Aspect-bounded Image Frame -->
    <div className="w-full aspect-[1.618/1] mt-4 rounded-xl bg-zinc-900 border border-zinc-50 outline-none flex items-center justify-center font-mono text-[9px] text-zinc-500">Asset: Golden Ratio 1.618:1</div>
  </div>

  <!-- Dynamic Card 2: standard unit card -->
  <div className="p-6 bg-zinc-950 border border-zinc-90 rounded-2xl flex flex-col justify-between min-h-[140px]">
    <div>
      <span className="text-[10px] text-zinc-500 font-mono">NODE 2</span>
      <h4 className="text-sm font-bold text-white mt-1">Lightweight Component</h4>
    </div>
    <span className="text-[10px] text-zinc-500 font-mono italic">Fits inside standard row bounds</span>
  </div>
</div>