improve mobile compatibility

styles/Gallery.module.css

@@ -31,3 +31,16 @@
 .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;