Update README.md

README.md

@@ -20,17 +20,24 @@ tags:
 
 <style>
 .gallery {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;  /* Slightly increased gap for larger images */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+    gap: 15px;
     justify-content: center;
+    max-width: 1200px;  /* Limits maximum width to show ~3 images per row */
+    margin: 0 auto;     /* Centers the gallery */
+    padding: 15px;
 }
 
 .gallery img {
-    width: 384px;  /* Increased from 256px to 384px */
+    width: 384px;
+    height: 384px;
+    object-fit: cover;  /* Maintains aspect ratio */
     cursor: pointer;
     transition: transform 0.2s;
-    border-radius: 8px;  /* Optional: adds slight rounding to corners */
+    border-radius: 8px;
+    margin: 0 auto;     /* Centers images in their grid cells */
+    display: block;
 }
 
 .gallery img:hover {
@@ -58,6 +65,7 @@ tags:
     position: relative;
     top: 50%;
     transform: translateY(-50%);
+    object-fit: contain;  /* Maintains aspect ratio in modal */
 }
 
 .modal.active {