Try new layout for quatuor bio

1 files changed, 7 insertions, 47 deletions

diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index f72c9af..05fbf4c 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -1,41 +1,23 @@
 @media (min-width: 40em) {
     main {
-        display: flex;
-    }
-
-    main div {
-        padding: 2%;
+        width: 80%;
+        justify-self: center;
     }
 
     main #photos {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-
-        position: sticky;
-        top: 0;
-        max-height: 80vh;
+        grid-template-columns: repeat(4, auto);
+        justify-content: space-around;
+        width: 100%;
     }
 
     #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);
+        height: 60vh;
+        filter: grayscale(0.5);
         transition: filter 1s, transform 1s;
     }
 
@@ -43,28 +25,6 @@
         filter: none;
         transform: scale(1.05);
     }
-
-    #photos > *:nth-of-type(1) {
-        top: -0.4em;
-    }
-
-    #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(4) {
-        top: 0.4em;
-    }
-
-    #bio > *:first-child {
-        margin-top: 0;
-    }
 }
 
 @media (max-width: 40em) {