Update photo grid to use CSS Grid for responsive, randomized sizes based on aspect ratio

src/app/globals.css

@@ -53,8 +53,11 @@ body {
 }
 
 .media-wall {
-  column-count: 2;
-  column-gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 150px;
+  grid-auto-flow: dense;
+  gap: 10px;
   padding: 80px 10px 20px;
   max-width: 1920px;
   margin: 0 auto;
@@ -62,49 +65,45 @@ body {
 
 @media (min-width: 480px) {
   .media-wall {
-    column-count: 3;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 180px;
   }
 }
 
 @media (min-width: 768px) {
   .media-wall {
-    column-count: 4;
-    column-gap: 15px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 200px;
+    gap: 15px;
     padding: 80px 15px 20px;
   }
 }
 
 @media (min-width: 1024px) {
   .media-wall {
-    column-count: 5;
-    column-gap: 20px;
+    grid-template-columns: repeat(5, 1fr);
+    grid-auto-rows: 250px;
+    gap: 20px;
     padding: 90px 20px 30px;
   }
 }
 
 @media (min-width: 1440px) {
   .media-wall {
-    column-count: 6;
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: 250px;
   }
 }
 
 .media-tile {
-  break-inside: avoid;
-  margin-bottom: 10px;
   position: relative;
   overflow: hidden;
   border-radius: var(--radius);
   background: var(--color-border);
   cursor: pointer;
   transition: transform var(--transition), box-shadow var(--transition);
-}
-
-@media (min-width: 768px) {
-  .media-tile { margin-bottom: 15px; }
-}
-
-@media (min-width: 1024px) {
-  .media-tile { margin-bottom: 20px; }
+  height: 100%;
+  width: 100%;
 }
 
 .media-tile:hover {
@@ -117,7 +116,7 @@ body {
 .media-tile video {
   display: block;
   width: 100%;
-  height: 100%; /* Filled by parent aspect-ratio */
+  height: 100%;
   object-fit: cover;
 }
 

src/components/MediaTile.tsx

@@ -38,10 +38,40 @@ export default function MediaTile({ item, index, onClick, votingOpen }: MediaTil
     return () => observer.disconnect();
   }, []);
 
-  const aspectRatio = item.width && item.height ? `${item.width} / ${item.height}` : '1 / 1';
+  let colSpan = 1;
+  let rowSpan = 1;
+
+  if (item.width && item.height) {
+    const ratio = item.width / item.height;
+    if (ratio > 1.2) {
+      // Landscape
+      colSpan = 2;
+      rowSpan = 1;
+    } else if (ratio < 0.8) {
+      // Portrait
+      colSpan = 1;
+      rowSpan = 2;
+    }
+  }
+
+  // Randomizer for variety based on ID so it stays consistent
+  const isRandomLarge = item.id % 7 === 0;
+  if (isRandomLarge) {
+    if (colSpan === 2 && rowSpan === 1) {
+      colSpan = 2;
+      rowSpan = 2;
+    } else if (colSpan === 1 && rowSpan === 2) {
+      colSpan = 2;
+      rowSpan = 2;
+    } else {
+      colSpan = 2;
+      rowSpan = 2;
+    }
+  }
 
   const style: React.CSSProperties = {
-    aspectRatio,
+    gridColumn: `span ${colSpan}`,
+    gridRow: `span ${rowSpan}`,
   };
 
   const isVideo = item.mediaType === 'VIDEO';