Rework Shop's Intro part

src/style/pages/_shop.scss

@@ -1,37 +1,127 @@
 .shop-page {
+    // Intro
+    &__intro {
+        position: relative;
+        height: 100vh;
+        min-height: 800px;
+        overflow: hidden;
 
-    // Header
+        // Top Menu
+        // Back
+        .back {
+            position: absolute;
+            z-index: 2;
+            left: 32px;
+            top: 32px;
+            color: #fff;
+            text-decoration: none;
+            font-size: rem(14px);
+            color: $color-cream;
+            max-width: 76px;
+
+            @include bp (sm) {
+                max-width: none;
+                font-size: rem(18px);
+            }
+        }
+        // Shop
+        .shop-title {
+            position: absolute;
+            z-index: 2;
+            top: 32px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: rem(14px);
+            color: $color-cream;
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+
+        // Site Title
+        h1 {
+            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            position: absolute;
+            z-index: 2;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            text-align: center;
+
+            span, strong {
+                color: #fff;
+            }
+        }
+
+        // Background Image
+        picture {
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            width: 100%;
+            height: 100%;
+            background-color: $color-primary-darker;
+            pointer-events: none;
+            user-select: none;
+
+            img {
+                opacity: 0.55;
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            // Gradient
+            &:before {
+                display: block;
+                content: "";
+                position: absolute;
+                z-index: 1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
+            }
+        }
+
+        // Navigation
         header {
-        position: fixed;
+            position: absolute;
-        // display: flex;
-        // display: none;
             z-index: 20;
             bottom: 0;
             width: 100%;
-        justify-content: center;
-        align-items: center;
-        background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
 
-        @include bp (sm) {
+            @include bp (md) {
-            display: flex;
+                height: 80px;
+            }
+
+            .container {
+                @include bp (md) {
+                    display: grid;
+                    grid-template-columns: 15% auto 15%;
+                    align-items: flex-end;
+                    gap: 16px;
+                    height: 100%;
+                    padding: 0 32px 32px;
+                }
             }
 
             // Shop
             p {
-            position: absolute;
+                margin-right: auto;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: 64px;
             }
 
             // Navigation
+            nav {
                 ul {
-            position: absolute;
                     display: flex;
-            bottom: 24px;
+                    align-items: center;
-            left: 0;
+                    justify-content: center;
-            right: 0;
+                }
-
                 li {
                     display: block;
                 }
@@ -53,74 +143,6 @@
                 }
             }
         }
-
-    // Intro
-    &__intro {
-        position: relative;
-        height: 100vh;
-        min-height: 800px;
-        overflow: hidden;
-        background-color: $color-primary-darker;
-
-        // Top Menu
-        // Back
-        .back {
-            position: absolute;
-            left: 32px;
-            top: 32px;
-            color: #fff;
-            text-decoration: none;
-            font-size: rem(14px);
-            color: $color-cream;
-            max-width: 76px;
-
-            @include bp (sm) {
-                max-width: none;
-                font-size: rem(18px);
-            }
-        }
-        // Shop
-        .shop-title {
-            position: absolute;
-            top: 32px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: rem(14px);
-            color: $color-cream;
-
-            @include bp (sm) {
-                font-size: rem(18px);
-            }
-        }
-
-        // Background Image
-        picture {
-            width: 100%;
-            height: 100%;
-            opacity: 0.55;
-
-            img {
-                display: block;
-                object-fit: cover;
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        // Site Title
-        h1 {
-            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 100%;
-            text-align: center;
-
-            span, strong {
-                color: #fff;
-            }
-        }
     }
 
     // About