From 8b3311c5d8cb0be997a764eb4b12e9ef9e9ecc21 Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Fri, 25 Jun 2021 15:40:23 +0200
Subject: [PATCH] improve mobile compatibility

---
 styles/Gallery.module.css | 13 +++++++++++++
 styles/globals.css        |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/styles/Gallery.module.css b/styles/Gallery.module.css
index 4b39134..8076e08 100644
--- a/styles/Gallery.module.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 65c7a1c..0eb2f80 100644
--- a/styles/globals.css
+++ b/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;