✨ Make About page stacking card scroll effect

Using Motion One example, thanks to https://codepen.io/bramus/pen/rNdzpZK (by Bramus)

src/style/molecules/_process-step.scss

@@ -1,17 +1,14 @@
 // About page Step
 .step {
-    position: sticky;
-    top: var(--offset-top);
-
     // Card
     &__card {
+        position: relative;
         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);
+        transform: translateZ(0);
 
         @include bp (sm) {
             --columns: 18;
@@ -21,27 +18,12 @@
             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) {
+        position: relative;
+        z-index: 2;
         display: block;
         overflow: hidden;
         width: 70%;
@@ -66,6 +48,9 @@
 
     // Content
     .content {
+        position: relative;
+        z-index: 2;
+
         @include bp (sm) {
             grid-column: 2 / span 7;
             grid-row: 2;
@@ -87,6 +72,22 @@
         }
     }
 
+    // Overlay
+    .overlay {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: #000;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateZ(0);
+    }
+
     // Alternate content order
     &:nth-child(even) {
         :global(.image) {
@@ -100,19 +101,4 @@
             }
         }
     }
-
-
-    /*
-    ** States
-    */
-    // Is pinned
-    &:global(.is-pinned) {
-        .step__card {
-            transform: scale(var(--scale)) translateZ(0);
-
-            &:before {
-                opacity: var(--opacity-index);
-            }
-        }
-    }
 }

src/style/pages/_about.scss

@@ -100,19 +100,22 @@
 
         // Steps grid
         .steps {
+            --card-offset: 16px;
+            --card-margin: 40px;
             grid-column: 1 / -1;
 
             @include bp (sm) {
                 grid-column: 4 / -4;
+                padding-bottom: calc(var(--cards-amount) * var(--card-offset));
             }
 
             & > :global(*) {
-                margin-top: var(--offset-top);
-                margin-bottom: calc(-1 * var(--offset-top) + 8px);
-
-                @include bp (sm) {
-                    margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
-                }
+                position: sticky;
+                top: var(--card-margin);
+                padding-top: calc(var(--index) * var(--card-offset));
+                padding-bottom: var(--card-margin);
+                margin-bottom: calc(-1 * var(--index) * var(--card-offset));
+                transform-origin: center top;
             }
         }
 
@@ -126,7 +129,6 @@
             justify-content: center;
             align-items: center;
             min-height: min(45vw, 720px);
-            margin-top: 20px;
             padding: 56px 32px;
             border-radius: 12px;
             background: $color-primary-darker;