working gallery, working skills

static/css/gallery.css

@@ -1,22 +1,48 @@
+#image-gallery {
+  margin: 2rem 0;
+}
+
 .gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 1rem;
+  column-count: 3;
+  column-gap: 1rem;
 }
 
-.gallery a {
-  display: block;
+.gallery-item {
+  break-inside: avoid;
+  margin-bottom: 1rem;
+  text-align: center;
+  list-style: none; /* ← important! */
 }
 
-.gallery img {
+
+.gallery-item img {
   width: 100%;
   height: auto;
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease;
+}
+
+.gallery-item img:hover {
+  transform: scale(1.6);
 }
 
 .caption {
-  text-align: center;
   font-size: 0.9rem;
-  color: #666;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0; /* ← just in case */
+  color: var(--fg-color);
+  list-style: none; /* ← extra-safe */
+}
+
+@media (max-width: 768px) {
+  .gallery {
+    column-count: 2;
+  }
+}
+
+@media (max-width: 480px) {
+  .gallery {
+    column-count: 1;
+  }
 }