mobile layout

1 files changed, 53 insertions, 0 deletions

diff --git a/styles/about.module.css b/styles/about.module.css
index 782c933..ba24fc7 100644
--- a/styles/about.module.css
+++ b/styles/about.module.css
@@ -61,3 +61,56 @@
   padding: var(--text-padding);
   margin: 0 auto;
 }
+
+@media (max-width: 999px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0;
+    --text-padding: 8px;
+  }
+
+  .member {
+    max-width: 600px;
+    width: calc(100% - var(--text-padding));
+    display: grid;
+    grid-template-columns: max(100px, 30%) 1fr;
+    grid-template-rows: 30px 70px 1fr 30px;
+  }
+
+  .member h2 {
+    grid-row: 1;
+    grid-column: 1/3;
+    text-align: center;
+  }
+
+  .member:not(:last-child){
+    margin-bottom: 32px;
+  }
+
+  .member img {
+    width: 80px;
+    height: auto;
+    margin-top: 16px;
+    grid-row: 1/3;
+    grid-column: 1;
+  }
+
+  .member .pronouns {
+    grid-column: 1;
+  }
+
+  .member .bio {
+    grid-column: 2;
+    grid-row: 2/4;
+  }
+
+  .member p:last-child {
+    grid-column: 1/3;
+  }
+
+  .summary {
+    max-width: 600px;
+    width: 100%;
+  }
+}