Fix CSS for image gallery

themes/tsc_vfl/assets/css/_images.scss

@@ -0,0 +1,61 @@
+@use 'responsive.scss' as r;
+
+.tsc-image {
+    margin: 0 auto;
+    width: fit-content;
+
+    img {
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.tsc-gallery {
+    display: grid;
+    place-items: center center;
+    grid-template-columns: 1fr;
+    gap: 15px;
+
+    @include r.media-large {
+        &.cols-2 {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        &.cols-3 {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        &.cols-4 {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+    }
+
+    .tsc-gallery-img {
+        margin: 5px 0;
+
+        a {
+            display: block;
+            // margin: 0 auto;
+            
+            img {
+                margin: 0 auto;
+                display: block;
+            }
+        }
+    }
+}
+
+.tsc-image, .tsc-gallery-img {
+    .credits {
+        font-style: italic;
+        float: right;
+    }
+}
+
+.youtube-video {
+    max-width: 100%;
+}
+
+.internal-video {
+    max-width: 100%;
+}

themes/tsc_vfl/assets/css/_responsive.scss

@@ -5,6 +5,12 @@
     }
 }
 
+@mixin media-medium {
+    @media screen and (min-width: 500px) {
+        @content;
+    }
+}
+
 @mixin mouse-available {
     @media screen and (pointer: fine) {
         @content;

themes/tsc_vfl/assets/css/main.scss

@@ -1,6 +1,7 @@
 @use 'responsive.scss' as r;
 @use './schedule';
 @use './colors.scss' as *;
+@use './images.scss';
 
 /* Variables */
 $total-width: 95%;
@@ -621,56 +622,6 @@ table {
     }
 }
 
-.tsc-image {
-    margin: 0 auto;
-    width: fit-content;
-
-    img {
-        display: block;
-        margin: 0 auto;
-    }
-}
-
-.tsc-gallery {
-    display: grid;
-    place-items: center center;
-    grid-template-columns: 1fr;
-    gap: 15px;
-
-    @include r.media-large {
-        &.cols-2 {
-            grid-template-columns: 1fr 1fr;
-        }
-
-        &.cols-3 {
-            grid-template-columns: 1fr 1fr 1fr;
-        }
-
-        &.cols-4 {
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-        }
-    }
-
-    .tsc-gallery-img {
-        margin: 5px 0;
-    }
-}
-
-.tsc-image, .tsc-gallery-img {
-    .credits {
-        font-style: italic;
-        float: right;
-    }
-}
-
-.youtube-video {
-    max-width: 100%;
-}
-
-.internal-video {
-    max-width: 100%;
-}
-
 .room {
     .image {
         max-width: 70%;