From de94d179bd118098945450f1dc165a7bfbf93009 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 22 Jun 2026 09:14:37 -0400
Subject: [PATCH] home3: Art pinned top, Play/Moment pair vertically centered
 in the space below (FIX1)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/home3/+page.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 60eb50c..845e72a 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -86,7 +86,8 @@
       <div class="art-swatch" style={art?.image ? `--art:url(${art.image})` : ''}></div>
     </a>
 
-    <!-- bottom pair -->
+    <!-- bottom pair — vertically centered in the space beneath the pinned Art card -->
+    <div class="pair-wrap">
     <div class="pair">
       <a class="card play" href="/play">
         <div class="play-top">
@@ -134,6 +135,7 @@
       </div>
     </div>
     </div>
+    </div>
   </main>
 
   <footer class="foot">upbeatBytes — no ads, no paywalls, no doomscrolling.</footer>
@@ -190,7 +192,9 @@
   /* right column matches the News height; Art stays pinned to the TOP and the Play/Moment
      pair to the BOTTOM, with the extra space distributed BETWEEN them (FIX1). The cards
      themselves keep their natural size and never stretch. */
-  .rightcol { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
+  .rightcol { display: flex; flex-direction: column; gap: 18px; }
+  .rightcol .art { flex: none; }                              /* Art pinned to the top */
+  .pair-wrap { flex: 1; display: flex; align-items: center; } /* fill the rest; pair vertically centered */
   .card {
     border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
     transition: transform 0.18s ease, box-shadow 0.18s ease;
@@ -245,7 +249,7 @@
   }
 
   /* bottom pair */
-  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+  .pair { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
   .play { background: #FFF3DC; border: 1px solid #f6e2b8; display: flex; flex-direction: column; }
   .play-top { padding: 22px 24px 0; }
   .play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 14px 0 0; color: #5c3d0c; }