1 files changed, 76 insertions, 53 deletions
diff --git a/quatuor.css b/quatuor.css
index 8b044f1..f72c9af 100644
--- a/quatuor.css
+++ b/quatuor.css
@@ -1,66 +1,89 @@
-main {
-    display: flex;
-}
+@media (min-width: 40em) {
+    main {
+        display: flex;
+    }
 
-main div {
-    padding: 2%;
-}
+    main div {
+        padding: 2%;
+    }
 
-main #photos {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
+    main #photos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
 
-    position: sticky;
-    top: 0;
-    max-height: 80vh;
-}
+        position: sticky;
+        top: 0;
+        max-height: 80vh;
+    }
 
-#photos > * {
-    position: relative;
-    width: 6em;
-    height: 100%;
-    background-color: #ddd;  /* Workaround for chromium bug#377847. */
-    border-color: #ddd;
-    border-width: 0.3em;
-    border-style: solid;
-    border-radius: 0.3em;
-    overflow: hidden;
-}
+    #photos > * {
+        position: relative;
+        width: 6em;
+        height: 100%;
+        background-color: #ddd;  /* Workaround for chromium bug#377847. */
+        border-color: #ddd;
+        border-width: 0.3em;
+        border-style: solid;
+        border-radius: 0.3em;
+        overflow: hidden;
+    }
 
-#photos img.portrait {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    filter: grayscale(1);
-    transition: filter 1s, transform 1s;
-}
+    #photos img.portrait {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+        filter: grayscale(1);
+        transition: filter 1s, transform 1s;
+    }
 
-#photos img.portrait:hover {
-    filter: none;
-    transform: scale(1.05);
-}
+    #photos img.portrait:hover {
+        filter: none;
+        transform: scale(1.05);
+    }
 
-#photos > *:nth-of-type(1) {
-    top: -0.4em;
-}
+    #photos > *:nth-of-type(1) {
+        top: -0.4em;
+    }
 
-#photos > *:nth-of-type(2) {
-    left: -1.6em;
-    top: 1.2em;
-}
+    #photos > *:nth-of-type(2) {
+        left: -1.6em;
+        top: 1.2em;
+    }
 
-#photos > *:nth-of-type(3) {
-    left: 1.6em;
-    top: -1.2em;
-}
+    #photos > *:nth-of-type(3) {
+        left: 1.6em;
+        top: -1.2em;
+    }
 
-#photos > *:nth-of-type(4) {
-    top: 0.4em;
+    #photos > *:nth-of-type(4) {
+        top: 0.4em;
+    }
+
+    #bio > *:first-child {
+        margin-top: 0;
+    }
 }
 
-#bio > *:first-child {
-    margin-top: 0;
+@media (max-width: 40em) {
+    #photos {
+        display: grid;
+        grid-template-columns: repeat(4, 20%);
+        justify-content: space-evenly;
+        width: 100%;
+    }
+
+    #photos > * {
+        width: 100%;
+        height: 50vh;
+    }
+
+    #photos img.portrait {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: center;
+    }
 }