3 files changed, 28 insertions, 59 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index e0f7c8d..cef538f 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -2,7 +2,7 @@ body {
     --gold: #E4B63A;
 
     margin: 0;
-    background-color: #deffe3;
+    background-color: white;
     font-family: 'Open Sans', sans-serif;
 }
 
@@ -97,6 +97,7 @@ footer.legal {
     header.banner h1 {
         font-size: 2.4rem;
         font-weight: normal;
+        max-width: 6em;         /* Force linebreak. */
     }
 
     header.menu {
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index 86d370b..adf11f4 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -1,26 +1,34 @@
 main {
     display: grid;
     grid-template-columns: 60% 40%;
-    padding-right: 4%;
+    align-items: center;
+    justify-self: center;
+    width: 80%;
 }
 
-main > div {
-    padding: 2%;
+#bio {
+    justify-self: center;
 }
 
-#bio dl {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    align-items: center;
+#bio dt, #bio dd {
+    display: inline;
 }
 
-#photo {
-    height: 90%;
-    align-self: center;
+#bio dt {
+    font-weight: bold;
+}
+
+#bio dd {
+    margin-left: 0;
+}
+
+#bio dl {
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
 }
 
 #photo img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
 }
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) {