Allow 4×1 quartet grid on narrower screensquatuor-photos-mobile

Hard to find a justifiable cutoff since I'm defining the image sizes
in terms of height…  Although they should all have the same aspect
ratio, so that should let me compute… stuff 🤔

1 files changed, 9 insertions, 3 deletions

diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index 7844992..9158b9a 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -62,8 +62,8 @@
 @media not all and (min-width: 50em) {
     #photos {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(20%, 50%));
-        justify-content: space-evenly;
+        grid-template-columns: repeat(4, auto);
+        justify-content: space-between;
         width: 100%;
     }
 
@@ -76,7 +76,7 @@
         display: block;
         margin-left: auto;
         margin-right: auto;
-        max-height: 60vh;
+        height: 60vh;
     }
 
     #photos p {
@@ -84,3 +84,9 @@
         text-align: center;
     }
 }
+
+@media (max-width: 20em) {
+    #photos {
+        grid-template-columns: repeat(auto-fit, 50%);
+    }
+}