Detect media on About Process Step, Visual fixes

src/style/pages/_about.scss

@@ -262,12 +262,6 @@
             margin: 128px 0 0;
         }
 
-        .container {
-            @include bp (mob-lg, max) {
-                padding: 0 8px;
-            }
-        }
-
         .title {
             grid-column: 1 / -1;
             max-width: 400px;
@@ -307,12 +301,14 @@
             }
 
             & > :global(*) {
+                grid-column: 1 / -1;
                 position: sticky;
                 top: var(--card-margin);
+                transform-origin: center top;
                 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;
+                will-change: transform;
             }
         }
 
@@ -342,6 +338,14 @@
                 width: clamp(250px, 75%, 562px);
                 margin: 0 auto;
             }
+
+            :global(.globe) {
+                margin-bottom: 32px;
+
+                @include bp (sm) {
+                    margin-bottom: 40px;
+                }
+            }
         }
     }
 
@@ -360,12 +364,16 @@
 
         .container-wide {
             overflow: hidden;
+
+            @include bp (sm, max) {
+                width: 100%;
+            }
         }
 
         .photos-grid {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
-            gap: 12px;
+            gap: 1.75vw;
             margin: -5% -5% 0;
             transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
             transition: transform 0.8s var(--ease-quart);