Fixing grid

scripts.js

@@ -25,11 +25,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 localStorage.setItem('mosaicImages', JSON.stringify(images));
             }
 
-            // Shuffle the images array
-            const shuffledImages = [...images].sort(() => Math.random() - 0.5);
+            // Shuffle and select only 9 images
+            const shuffledImages = [...images]
+                .sort(() => Math.random() - 0.5)
+                .slice(0, 9);
 
             // Create rows for different animation directions
-            const rows = Array.from({ length: 4 }, (_, i) => {
+            const rows = Array.from({ length: 3 }, (_, i) => {
                 const row = document.createElement('div');
                 row.className = `mosaic-row-${i + 1}`;
                 row.style.display = 'flex';
@@ -49,15 +51,15 @@ document.addEventListener('DOMContentLoaded', () => {
             // Wait for all images to load
             const loadedImages = await Promise.all(imageLoadPromises);
 
-            // Create 16 image elements (4x4 grid)
+            // Create 9 image elements (3x3 grid)
             loadedImages.forEach((img, i) => {
                 const newImg = document.createElement('img');
                 newImg.src = img.src;
                 newImg.className = 'mosaic-image';
                 newImg.alt = '';
 
                 // Add to appropriate row
-                const rowIndex = Math.floor(i / 4);
+                const rowIndex = Math.floor(i / 3);
                 rows[rowIndex].appendChild(newImg);
             });
 

styles.css

@@ -22,8 +22,8 @@
     height: 100%;
     z-index: 0;
     display: none;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
     gap: 0;
     padding: 0;
     opacity: 0;
@@ -43,31 +43,31 @@
     width: 100%;
     height: 100%;
     background-color: #000e22;
-    opacity: 0.9;
+    opacity: 0.8;
     z-index: 1;
 }
 
 .mosaic-image {
-    width: 100%;
+    width: calc(100% / 3);
     height: 100%;
     object-fit: cover;
+    flex-shrink: 0;
 }
 
 /* Add animation classes for each row */
 .mosaic-row-1 {
     animation: slideRight 80s linear infinite;
+    width: 100%;
 }
 
 .mosaic-row-2 {
     animation: slideLeft 80s linear infinite;
+    width: 100%;
 }
 
 .mosaic-row-3 {
     animation: slideRight 80s linear infinite;
-}
-
-.mosaic-row-4 {
-    animation: slideLeft 80s linear infinite;
+    width: 100%;
 }
 
 @keyframes slideRight {