✨ Make About page stacking card scroll effect

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

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;