Add Creation and Present section to About page

src/style/_typography.scss

@@ -97,6 +97,20 @@
 /* ==========================================================================
    TEXT
 ========================================================================== */
+// Huge
+.text-huge {
+    font-size: rem(72px);
+    font-weight: 300;
+    line-height: 1.25;
+
+    @include bp (sm) {
+        // font-size: rem(36px);
+    }
+    @include bp (sd) {
+        // font-size: rem(44px);
+    }
+}
+
 // Big
 .text-big {
     font-size: rem(32px);

src/style/pages/_about.scss

@@ -60,6 +60,30 @@
     */
     &__creation {
         background: #fff;
+        padding-bottom: 240px;
+
+        // Figures
+        :global(picture) {
+            width: 100%;
+            border-radius: 16px;
+            overflow: hidden;
+
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        figcaption {
+            margin-left: auto;
+            color: $color-gray;
+            text-align: right;
+
+            @include bp (sm) {
+                margin-top: 24px;
+            }
+        }
 
         // First photo
         .first-photo {
@@ -68,30 +92,11 @@
 
             @include bp (sm) {
                 grid-column: 8 / -2;
-                margin: -10vw 0 clamp(80px, 10vw, 128px);
-            }
-
-            :global(picture) {
-                width: 100%;
-                border-radius: 16px;
-                overflow: hidden;
-
-                :global(img) {
-                    display: block;
-                    width: 100%;
-                    height: auto;
-                }
+                margin: -10vw 0 70px;
+                // margin: -10vw 0 clamp(80px, 10vw, 128px);
             }
 
             figcaption {
-                margin-left: auto;
-                color: $color-gray;
-                text-align: right;
-
-                @include bp (sm) {
-                    margin-top: 24px;
-                }
-
                 a {
                     color: inherit;
                     text-decoration: none;
@@ -119,8 +124,104 @@
                 }
             }
         }
+
+        // Text content
+        h2 {
+            grid-column: 3 / span 10;
+            max-width: 240px;
+            line-height: 1.2;
+            margin-bottom: 48px;
+        }
+
+        // Large text
+        .heading {
+            grid-column: 3 / -3;
+            color: $color-primary-tertiary20;
+            margin-bottom: 112px;
+
+            strong {
+                color: $color-lilas-bright;
+                font-weight: inherit;
+            }
+        }
+
+        // Small paragraph
+        .text {
+            color: $color-text;
+            grid-column: 9 / span 6;
+            align-self: center;
+        }
+
+        // Portrait
+        .portrait-photo {
+            position: relative;
+            grid-column: 16 / span 7;
+            align-self: center;
+
+            figcaption {
+                position: absolute;
+                bottom: -40px;
+                right: 0;
+            }
+        }
     }
 
+    /*
+    ** Present
+    */
+    &__present {
+        background-color: $color-cream;
+
+        .text {
+            color: $color-gray;
+        }
+
+        // Poster image
+        :global(picture) {
+            height: auto;
+
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+
+            &:first-of-type {
+                overflow: hidden;
+                border-radius: 12px;
+                grid-column: 3 /-6;
+                margin-top: -100px;
+            }
+            &:last-of-type {
+                grid-column: 1 / -1;
+            }
+        }
+
+        h2 {
+            grid-column: 3 / 7;
+            line-height: 1;
+            margin-top: 88px;
+        }
+        .text {
+            &:first-of-type {
+                grid-column: 3 / span 6;
+                align-self: baseline;
+                margin-top: 24px;
+            }
+            &:last-of-type {
+                grid-column: 11 / span 8;
+                margin: 96px 0 144px;
+            }
+        }
+
+        .heading {
+            grid-column: 11 / -2;
+            color: $color-primary-tertiary20;
+            align-self: baseline;
+        }
+    }
+
+
 
     /*
     ** Process
@@ -131,7 +232,7 @@
         margin-top: 72px;
 
         @include bp (sm) {
-            margin: 128px 0 0;
+            margin: 96px 0 0;
         }
 
         & > .container {