max width

style.css

@@ -6,8 +6,6 @@ body {
     font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
-
-
 nav {
     /* positioning and look */
     position: sticky;
@@ -17,6 +15,9 @@ nav {
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
     height: var(--nav-height);
+}
+
+nav > div {
     max-width: var(--max-content-width);
     margin: 0 auto;
 
@@ -54,11 +55,14 @@ nav {
     }
 }
 
-.hero {
-    height: calc(100vh - var(--nav-height) - 2rem);
+section {
     padding: 1rem 2rem;
     margin: 0 auto;
+}
+
+.hero {
     max-width: var(--max-content-width);
+    height: calc(100vh - var(--nav-height) - 2rem);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -98,4 +102,26 @@ nav {
             }
         }
     }
+}
+
+.about-us {
+    background-color: var(--surface-container-low);
+
+    & > div {
+        max-width: var(--max-content-width);
+        margin: 0 auto;
+        padding: 2rem;
+
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        align-items: center;
+        gap: 1rem;
+
+        & > div {
+            & > span {
+                color: var(--primary);
+            }
+            gap: 1rem;
+        }
+    }
 }