[wip] ✨ Rework About page layout (desktop)

src/style/pages/_about.scss

@@ -27,7 +27,7 @@
                 max-width: 788px;
             }
 
-            strong {
+            :global(strong) {
                 color: $color-secondary-light;
                 font-weight: inherit;
             }
@@ -43,8 +43,11 @@
                 align-self: baseline;
             }
 
-            a {
+            :global(a) {
+                display: inline-block;
                 color: currentColor;
+                text-decoration: none;
+                border-bottom: 1px solid rgba($color-tertiary, 0.3);
                 transition: color 0.3s;
 
                 &:hover {
@@ -92,7 +95,7 @@
 
             @include bp (sm) {
                 grid-column: 8 / -2;
-                margin: -10vw 0 70px;
+                margin: -10vw 0 clamp(48px, 7vw, 88px);
                 // margin: -10vw 0 clamp(80px, 10vw, 128px);
             }
 
@@ -139,7 +142,7 @@
             color: $color-primary-tertiary20;
             margin-bottom: 112px;
 
-            strong {
+            :global(strong) {
                 color: $color-lilas-bright;
                 font-weight: inherit;
             }
@@ -166,35 +169,26 @@
         }
     }
 
+
     /*
     ** Present
     */
     &__present {
         background-color: $color-cream;
 
-        .text {
-            color: $color-gray;
-        }
-
         // Poster image
         :global(picture) {
             height: auto;
+            overflow: hidden;
+            border-radius: 12px;
+            grid-column: 3 / -6;
+            margin-top: -100px;
 
             :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 {
@@ -202,13 +196,18 @@
             line-height: 1;
             margin-top: 88px;
         }
+        :global(p) {
+            color: $color-text;
+        }
         .text {
-            &:first-of-type {
+            @include bp (sm) {
                 grid-column: 3 / span 6;
                 align-self: baseline;
                 margin-top: 24px;
             }
-            &:last-of-type {
+        }
+        .conclusion {
+            @include bp (sm) {
                 grid-column: 11 / span 8;
                 margin: 96px 0 144px;
             }
@@ -216,12 +215,28 @@
 
         .heading {
             grid-column: 11 / -2;
-            color: $color-primary-tertiary20;
             align-self: baseline;
+
+            :global(p) {
+                max-width: 800px;
+                color: $color-primary-tertiary20;
+            }
         }
     }
 
 
+    // Showcase image
+    &__showcase {
+        :global(picture) {
+            grid-column: 1 / -1;
+        }
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+    }
+
 
     /*
     ** Process
@@ -328,6 +343,11 @@
     &__photos {
         position: relative;
         z-index: 1;
+        margin-top: clamp(48px, 10vw, 80px);
+
+        @include bp (sm) {
+            margin-bottom: clamp(80px, 10vw, 128px);
+        }
         // margin-top: -64px;
 
         @include bp (sm) {