Improve some pages on mobile

2 files changed, 40 insertions, 26 deletions

diff --git a/contact.css b/contact.css
index 0fc5988..6bd68ec 100644
--- a/contact.css
+++ b/contact.css
@@ -1,18 +1,20 @@
-main {
-    display: grid;
-    grid-template-columns: 60% 40%;
-    padding-right: 4%;
-}
+@media (min-width: 40em) {
+    main {
+        display: grid;
+        grid-template-columns: 60% 40%;
+        padding-right: 4%;
+    }
 
-main > div {
-    padding: 2%;
-}
+    main > div {
+        padding: 2%;
+    }
 
-#contact-us dl {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-}
+    #contact-us dl {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+    }
 
-#contact-us dd {
-    margin-left: inherit;
+    #contact-us dd {
+        margin-left: inherit;
+    }
 }
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;
+    }
+}