update images

Author: YIGE24

_pages/gallery.md

@@ -8,23 +8,43 @@ nav_order: 5
 ---
 
 <style>
-.gallery-item img {
-    height: 220px;
+.gallery-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.gallery-vertical .gallery-item {
     width: 100%;
-    object-fit: cover;
+}
+
+.gallery-vertical .gallery-item img {
+    width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-vertical .gallery-item img:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
 }
 </style>
 
 ## Lab Life
 
-<div class="row">
-    <div class="col-sm-4 mt-3 mt-md-0 gallery-item">
+<div class="gallery-vertical">
+    <div class="gallery-item">
         {% include figure.liquid path="assets/img/gallery/photo1.jpg" title="Photo 1" class="img-fluid rounded z-depth-1" zoomable=true %}
     </div>
-    <div class="col-sm-4 mt-3 mt-md-0 gallery-item">
+    <div class="gallery-item">
         {% include figure.liquid path="assets/img/gallery/photo2.jpg" title="Photo 2" class="img-fluid rounded z-depth-1" zoomable=true %}
     </div>
-    <div class="col-sm-4 mt-3 mt-md-0 gallery-item">
+    <div class="gallery-item">
         {% include figure.liquid path="assets/img/gallery/photo3.jpg" title="Photo 3" class="img-fluid rounded z-depth-1" zoomable=true %}
     </div>
 </div>