feat: integrate members section

css/content.css

@@ -1,3 +1,5 @@
+/* Sections */
+
 .section {
     margin-bottom: var(--space-xlarge);
     display: flex;
@@ -22,6 +24,9 @@
 }
 
 .section--content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 @media (max-width: 768px) {
@@ -42,5 +47,24 @@
     .section--content {
         grid-area: 2 / 1 / 3 / 4;
     }
-
+}
+
+/* Members area */
+
+.members {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-medium);
+}
+
+.member {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media (max-width: 768px) {
+    .members {
+        flex-direction: column;
+    }
 }

css/typo.css

@@ -1,10 +1,9 @@
-h1, h2, h3 {
+h1, h2, h3, h4 {
     font-family: Knewave;
-    margin: 0 0 var(--space-medium) 0;
 }
 
 h1 {
-    margin: var(--space-xsmall);
+    margin: 0 0 var(--space-medium) 0;
 
     font-family: "Knewave", system-ui;
     font-size: var(--fz-1);
@@ -14,6 +13,8 @@ h1 {
 }
 
 h2 {
+    margin: 0 0 var(--space-medium) 0;
+
     font-family: "Knewave", system-ui;
     font-size: var(--fz-2);
 
@@ -21,10 +22,19 @@ h2 {
 }
 
 h3 {
+    margin: 0 0 var(--space-small) 0;
+
     font-family: "Knewave", system-ui;
     font-size: var(--fz-3);
 }
 
+h4 {
+    margin: 0 0 var(--space-small) 0;
+
+    font-family: "Knewave", system-ui;
+    font-size: var(--fz-4);
+}
+
 p {
     margin-bottom: var(--space-medium);
 }

index.html

@@ -93,6 +93,20 @@
                         unlikeliest of places. Welcome to Frog Collective – where
                      small is mighty, and fun knows no bounds!
                     </p>
+
+                    <h3>Members</h3>
+                    <div class="members">
+                        <div class="member">
+                            <img class="member--avatar" src="img/aurel.png"></img>
+                            <h4 class="member--name">Aurel</h4>
+                            <div class="member--description">Art</div>
+                        </div>
+                        <div class="member">
+                            <img class="member--avatar" src="img/adrien.png"></img>
+                            <h4 class="member--name">Adrien</h4>
+                            <div class="member--description">Dev</div>
+                        </div>
+                    </div>
                 </div>
             </div>