Detect media on About Process Step, Visual fixes

src/style/molecules/_process-step.scss

@@ -21,12 +21,13 @@
     }
 
     // Image
-    :global(.image) {
+    .media {
         position: relative;
         z-index: 2;
         display: block;
         overflow: hidden;
         width: 70%;
+        max-height: 580px;
         margin: 0 auto 64px;
         border-radius: 6px;
 
@@ -38,12 +39,20 @@
             margin-bottom: 0;
         }
 
-        :global(img) {
+        video, :global(.image) {
             display: block;
-            width: 100%;
             height: 100%;
+            width: 100%;
             object-fit: cover;
         }
+        :global(.image) {
+            :global(img) {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
     }
 
     // Content
@@ -90,7 +99,7 @@
 
     // Alternate content order
     &:nth-child(even) {
-        :global(.image) {
+        .media {
             @include bp (sm) {
                 grid-column: 2 / span 7;
             }

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);