homepage bento: hero shrinks into 1fr+300px grid w/ banner at top right

The 21:9 hero used to span full width and the Blackmagic 300x600 sat
next to the 3-up rail beneath it. Layout request: shrink the hero
horizontally (keep aspect ratio — height shrinks proportionally) so the
300x600 lifts up alongside the hero itself, with the 3-up rail still
under the hero in the left column. Same outer grid, just hero+rail now
live together in the left column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/FeaturedBentoFromDb.tsx

@@ -78,7 +78,15 @@ export default async function FeaturedBento() {
         </Link>
       </div>
 
-      {/* Cinematic 21:9 hero — full width, image fills, gradient + overlaid title */}
+      {/* Two-column outer grid: left column holds the 21:9 hero + 3-up rail;
+          right column is the Blackmagic 300x600. The hero now sits NARROWER
+          (constrained to the 1fr-300px column) but keeps its 21:9 / 21:8
+          aspect ratio — height shrinks proportionally. Banner moves UP to
+          start at the very top of the row, baseline-aligned with the hero.
+          Mobile collapses to single column (banner hidden via lg:block). */}
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 items-start">
+        <div className="flex flex-col gap-4 min-w-0">
+          {/* Cinematic 21:9 hero — fills left column, aspect ratio preserved */}
           <Link
             href={`/news/${hero.wp_slug}`}
             className="group block relative overflow-hidden rounded border border-[#252525] bg-[#0b0f17] hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
@@ -121,11 +129,7 @@ export default async function FeaturedBento() {
             </div>
           </Link>
 
-      {/* Row below the hero — 3-up rail (left) + Blackmagic 300x600 (right).
+          {/* 3-up rail directly under the hero, still in the left column */}
-          Right column is locked to 300px so its edge aligns with the right
-          edge of the 21:9 hero above; SidebarAdStack downstream skips this
-          banner so it doesn't double-render. */}
-      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 mt-4 items-start">
           <div className="grid grid-cols-3 gap-3">
             {rail.map((r) => (
               <Link
@@ -154,6 +158,7 @@ export default async function FeaturedBento() {
             </Link>
           ))}
           </div>
+        </div>
         <aside className="hidden lg:block" aria-label="Premium sponsor">
           {heroAd ? (
             <AdImage ad={heroAd} priority />