Optimize Justified Layout with responsive target row heights to enlarge portraits and fix mobile packing

src/app/globals.css

@@ -14,6 +14,21 @@
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
   --transition: 0.2s ease;
+  
+  /* Responsive target row height for the justified gallery */
+  --target-row-height: 180px; 
+}
+
+@media (min-width: 768px) {
+  :root {
+    --target-row-height: 280px;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --target-row-height: 350px;
+  }
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }

src/components/MediaTile.tsx

@@ -42,15 +42,15 @@ export default function MediaTile({ item, index, onClick, votingOpen }: MediaTil
 
   const defaultRatio = 1.5;
   const ratio = (item.width && item.height) ? item.width / item.height : defaultRatio;
-  const targetRowHeight = 250; // We can tweak this base height
 
   // By using flexGrow and flexBasis proportional to the aspect ratio,
   // Flexbox will distribute the items so that ALL items in the same row
   // end up with the EXACT same height! 
+  // We use a CSS variable for the target row height to make it responsive.
   const style: React.CSSProperties = {
     flexGrow: ratio,
     flexShrink: ratio,
-    flexBasis: `${ratio * targetRowHeight}px`,
+    flexBasis: `calc(${ratio} * var(--target-row-height))`,
   };
 
   const isVideo = item.mediaType === 'VIDEO';