✨ Rework About page Process section

src/style/molecules/_process-step.scss

@@ -1,23 +1,20 @@
 // About page Step
 .step {
-    // Card
-    &__card {
-        position: relative;
-        display: block;
-        overflow: hidden;
-        padding: 56px 32px 32px;
-        background: $color-primary-darker;
-        border-radius: 12px;
-        transform: translateZ(0);
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 56px 32px 32px;
+    background: $color-primary-darker;
+    border-radius: 12px;
+    transform: translateZ(0);
 
-        @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;
-        }
+    @include bp (sm) {
+        --columns: 11;
+        display: grid;
+        grid-template-rows: repeat(2, 1fr);
+        padding: 8% 0;
+        min-height: clamp(400px, 75vh, 800px);
+        border-radius: 16px;
     }
 
     // Image
@@ -27,87 +24,36 @@
         display: block;
         overflow: hidden;
         width: 70%;
-        max-height: 580px;
-        margin: 0 auto 64px;
+        max-height: 550px;
+        margin-bottom: 48px;
         border-radius: 6px;
 
         @include bp (sm) {
-            grid-column: 11 / -2;
+            grid-column: 2 / span 6;
             grid-row: 1 / -1;
             width: 100%;
-            height: 100%;
-            margin-bottom: 0;
+            height: auto;
         }
 
-        video, :global(.image) {
-            display: block;
-            height: 100%;
-            width: 100%;
-            object-fit: cover;
-        }
         :global(.image) {
-            :global(img) {
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
+            // width: 100%;
+            // height: 100%;
+        }
+        :global(.image img), video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
     // Content
-    .content {
+    .text {
         position: relative;
         z-index: 2;
-
-        @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;
-        }
-    }
-
-    // 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) {
-        .media {
-            @include bp (sm) {
-                grid-column: 2 / span 7;
-            }
-        }
-        .content {
-            @include bp (sm) {
-                grid-column: 11 / -2;
-            }
-        }
+        line-height: 1.5;
+        font-weight: 300;
+        color: $color-secondary-light;
+        grid-column: 2 / -2;
     }
 }