Fix responsive styling on About

src/style/pages/_about.scss

@@ -3,10 +3,10 @@
     ** Introduction
     */
     &__introduction {
-        padding: clamp(48px, 10vw, 80px) 0 138px;
+        padding: clamp(48px, 10vw, 80px) 0 136px;
 
         @include bp (sm) {
-            padding: clamp(80px, 7vw, 128px) 0 clamp(200px, 20vw, 360px);
+            padding: clamp(64px, 7vw, 128px) 0 clamp(200px, 20vw, 360px);
         }
 
         // Section title
@@ -27,6 +27,9 @@
             margin-bottom: 48px;
 
             @include bp (sm) {
+                grid-column: 3 / -3;
+            }
+            @include bp (md) {
                 grid-column: 3 / span 12;
                 grid-row: 2;
                 align-self: baseline;
@@ -46,6 +49,9 @@
             color: $color-tertiary;
 
             @include bp (sm) {
+                grid-column: 3 / span 14;
+            }
+            @include bp (md) {
                 grid-column: 17 / span 6;
                 grid-row: 2;
                 align-self: baseline;
@@ -71,10 +77,10 @@
     */
     &__creation {
         background: #fff;
-        padding-bottom: 160px;
+        padding-bottom: clamp(120px, 10vw, 160px);
 
         @include bp (sm) {
-            padding-bottom: 240px;
+            padding-bottom: clamp(160px, 20vw, 240px);
         }
 
         // Figures
@@ -99,11 +105,10 @@
             margin-top: 16px;
             color: $color-gray;
             text-align: right;
-            font-size: rem(12px);
+            line-height: 1.55;
 
             @include bp (sm) {
                 margin-top: 24px;
-                font-size: rem(14px);
             }
         }
 
@@ -117,7 +122,6 @@
             @include bp (sm) {
                 grid-column: 8 / -2;
                 margin: -10vw 0 clamp(48px, 7vw, 88px);
-                // margin: -10vw 0 clamp(80px, 10vw, 128px);
             }
 
             figcaption {
@@ -158,8 +162,8 @@
         h2 {
             grid-column: 1 / -2;
             max-width: 240px;
-            line-height: 1.2;
             margin-bottom: 16px;
+            line-height: 1.2;
 
             @include bp (sm) {
                 grid-column: 3 / span 10;
@@ -170,8 +174,8 @@
         // Large text
         .heading {
             grid-column: 1 / -1;
-            color: $color-primary-tertiary20;
             margin-bottom: 72px;
+            color: $color-primary-tertiary20;
 
             :global(strong) {
                 color: $color-lilas-bright;
@@ -191,6 +195,9 @@
             align-self: center;
 
             @include bp (sm) {
+                grid-column: 4 / span 8;
+            }
+            @include bp (md) {
                 grid-column: 9 / span 6;
             }
         }
@@ -202,24 +209,24 @@
             grid-row: 4;
 
             @include bp (sm) {
+                grid-column: 13 / -3;
+            }
+            @include bp (md) {
                 grid-column: 16 / span 7;
             }
         }
-
         .portrait-photo__caption {
             grid-column: 3 / -1;
             grid-row: 5;
-            color: $color-gray;
+            margin-top: 16px;
             margin-bottom: 40px;
             text-align: right;
-            font-size: rem(12px);
+            color: $color-gray;
-            margin-top: 16px;
+            line-height: 1.55;
 
-            @include bp (md) {
+            @include bp (sm) {
                 grid-column: 16 / span 7;
-                margin: 0;
+                margin: 24px 0 0;
-                font-size: rem(16px);
-                margin-top: 24px;
             }
         }
     }
@@ -233,17 +240,20 @@
 
         // Poster image
         :global(picture) {
-            height: auto;
-            overflow: hidden;
-            border-radius: 8px;
             grid-column: 1 / -1;
+            height: 100vw;
+            max-height: 486px;
+            overflow: hidden;
             margin-top: -64px;
-            height: 486px;
+            margin-bottom: 72px;
+            border-radius: 8px;
 
             @include bp (sm) {
                 grid-column: 3 / -6;
-                margin-top: -100px;
                 height: auto;
+                max-height: none;
+                margin-top: -96px;
+                margin-bottom: clamp(56px, 7vw, 88px);
             }
             @include bp (md) {
                 border-radius: 12px;
@@ -260,11 +270,9 @@
         h2 {
             grid-column: 1 / -1;
             line-height: 1;
-            margin-top: 72px;
 
             @include bp (sm) {
                 grid-column: 3 / 7;
-                margin-top: 88px;
             }
         }
         :global(p) {
@@ -310,13 +318,30 @@
 
     // Showcase image
     &__showcase {
+        padding: 0;
+
+        @include bp (sm) {
+            overflow: hidden;
+            height: 0;
+            padding-bottom: 120%;
+        }
+
         :global(picture) {
             grid-column: 1 / -1;
+
+            @include bp (sm) {
+                display: flex;
+                justify-content: center;
+            }
         }
         :global(img) {
             display: block;
             width: 100%;
             height: auto;
+
+            @include bp (sm) {
+                width: 130%;
+            }
         }
     }
 
@@ -330,7 +355,7 @@
         margin-top: 48px;
 
         @include bp (sm) {
-            margin: 96px 0 0;
+            margin-top: clamp(48px, 7vw, 96px);
         }
 
         & > .container {
@@ -363,9 +388,9 @@
                     }
                 }
                 p {
+                    max-width: 320px;
                     color: $color-tertiary;
                     font-weight: 300;
-                    max-width: 320px;
 
                     @include bp (sm) {
                         max-width: none;
@@ -444,11 +469,6 @@
         @include bp (sm) {
             margin-bottom: clamp(80px, 10vw, 128px);
         }
-        // margin-top: -64px;
-
-        @include bp (sm) {
-            // margin-top: -120px;
-        }
 
         .container-wide {
             overflow: hidden;