[wip] Make About page Process step a component

Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit

src/style/molecules/_process-step.scss

@@ -0,0 +1,118 @@
+// About page Step
+.step {
+    position: sticky;
+    top: var(--offset-top);
+
+    // Card
+    &__card {
+        display: block;
+        overflow: hidden;
+        padding: 56px 32px 32px;
+        background: $color-primary-darker;
+        border-radius: 12px;
+        transform-origin: top center;
+        transition: transform 0.8s var(--ease-quart);
+
+        @include bp (sm) {
+            --columns: 18;
+            display: grid;
+            grid-template-rows: repeat(2, 1fr);
+            padding: 5.5% 0;
+            min-height: min(45vw, 720px);
+            border-radius: 16px;
+        }
+
+        // Overlay
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: -1;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.8s var(--ease-quart);
+            transform: translateZ(0);
+        }
+    }
+
+    // Image
+    :global(.image) {
+        display: block;
+        overflow: hidden;
+        width: 70%;
+        margin: 0 auto 64px;
+        border-radius: 6px;
+
+        @include bp (sm) {
+            grid-column: 11 / -2;
+            grid-row: 1 / -1;
+            width: 100%;
+            height: 100%;
+            margin-bottom: 0;
+        }
+
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Content
+    .content {
+        @include bp (sm) {
+            grid-column: 2 / span 7;
+            grid-row: 2;
+            align-self: flex-end;
+        }
+
+        h3 {
+            margin-bottom: 8px;
+            color: #fff;
+
+            @include bp (sm) {
+                margin-bottom: 16px;
+            }
+        }
+        .text {
+            line-height: 1.5;
+            font-weight: 300;
+            color: $color-secondary-light;
+        }
+    }
+
+    // Alternate content order
+    &:nth-child(even) {
+        :global(.image) {
+            @include bp (sm) {
+                grid-column: 2 / span 7;
+            }
+        }
+        .content {
+            @include bp (sm) {
+                grid-column: 11 / -2;
+            }
+        }
+    }
+
+
+    /*
+    ** States
+    */
+    // Is pinned
+    &:global(.is-pinned) {
+        .step__card {
+            transform: scale(var(--scale)) translateZ(0);
+
+            &:before {
+                opacity: var(--opacity-index);
+            }
+        }
+    }
+}