improve mobile compatibility

styles/Gallery.module.css

@@ -30,4 +30,17 @@
   
 .gallery > div:hover .overlay {
     opacity: 1;
+}
+
+/* mobile */
+@media (max-aspect-ratio: 1/1) {
+    .gallery {
+        column-count: 2;
+    }
+}
+
+@media (max-aspect-ratio: 5/7) {
+    .gallery {
+        column-count: 1;
+    }
 }

styles/globals.css

@@ -98,6 +98,12 @@ hr {
   }
 }
 
+@media(max-aspect-ratio: 3/4) {
+  .card {
+    padding: 1em;
+  }
+}
+
 @media(min-width: 1200px) {
   .container {
     max-width: 1200px;