fix(hero): fix mosaic layout full-width + update screenshots

- Override inherited 2-column grid from .hero by adding display: block to .hero--mosaic
- Add explicit grid-column/grid-row for mosaic cells 3 & 4 to prevent auto-placement issues
- Slice heroData to 4 images to match 4 defined grid cells
- Regenerate hero-mosaic-home.png and theme-studio-home.png screenshots

app/globals.css

@@ -457,6 +457,7 @@
 /* ── Hero: Mosaic Layout ────────────────────────── */
 .hero--mosaic {
   position: relative;
+  display: block; /* override inherited 1fr 1fr split grid from .hero */
   min-height: calc(100vh - 56px);
 }
 
@@ -479,15 +480,27 @@
 
 /* Cell 1: spans 2 rows on the left */
 .hero__mosaic-cell--1 {
+  grid-column: 1;
   grid-row: 1 / 3;
 }
 
-/* Cell 2: wide, top right */
+/* Cell 2: wide, top right — spans 2 columns */
 .hero__mosaic-cell--2 {
   grid-column: 2 / 4;
+  grid-row: 1;
 }
 
-/* Remaining cells fill naturally */
+/* Cell 3: bottom middle */
+.hero__mosaic-cell--3 {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* Cell 4: bottom right */
+.hero__mosaic-cell--4 {
+  grid-column: 3;
+  grid-row: 2;
+}
 
 .hero__mosaic-overlay {
   position: absolute;

app/page.tsx

@@ -145,7 +145,7 @@ export default async function HomePage() {
     return (
       <div className="hero hero--mosaic">
         <div className="hero__mosaic-grid">
-          {heroData.slice(0, 6).map((img, i) => (
+          {heroData.slice(0, 4).map((img, i) => (
             <div key={i} className={`hero__mosaic-cell hero__mosaic-cell--${i + 1}`}>
               <Image
                 src={img.src}