Improve some pages on mobile

1 files changed, 24 insertions, 12 deletions

diff --git a/gallerie.css b/gallerie.css
index f8f6369..a75faf7 100644
--- a/gallerie.css
+++ b/gallerie.css
@@ -1,18 +1,9 @@
-main {
-    padding-top: 2%;
-    padding-bottom: 2%;
-    padding-right: 2%;
-}
-
 .mosaic {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr));
     grid-gap: 0.8em;
 }
 
-.mosaic.photos {
-    --mosaic-side: 14em;
-}
 .mosaic .photo {
     position: relative;
     width: 100%;
@@ -38,9 +29,6 @@ main {
     filter: none;
 }
 
-.mosaic.videos {
-    --mosaic-side: 25em;
-}
 .mosaic .video {
     position: relative;
     width: 100%;
@@ -54,3 +42,27 @@ main {
     width: 100%;
     height: 100%;
 }
+
+@media (min-width: 40em) {
+    main {
+        padding-top: 2%;
+        padding-bottom: 2%;
+        padding-right: 2%;
+    }
+
+    .mosaic.photos {
+        --mosaic-side: 14em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 25em;
+    }
+}
+
+@media (max-width: 40em) {
+    .mosaic.photos {
+        --mosaic-side: 8em;
+    }
+    .mosaic.videos {
+        --mosaic-side: 10em;
+    }
+}