Fix Shop intro responsive

src/routes/shop/__layout.svelte

@@ -62,10 +62,16 @@
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>
+        <div class="top container">
             <a href="/" class="back">
-            Back to Houses Of
+                <svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4 1 1 4l3 3" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span>Back to Houses Of</span>
             </a>
+
             <span class="shop-title">Shop</span>
+        </div>
 
         <SiteTitle
             variant="inline"

src/style/atoms/_site-title.scss

@@ -75,7 +75,7 @@
 
             @include bp (sm) {
                 font-size: 0.333em;
-                margin: 0 16px 0 20px;
+                margin: 0 10px 0 20px;
             }
         }
     }

src/style/pages/_shop.scss

@@ -74,30 +74,42 @@
         overflow: hidden;
 
         // Top Menu
+        .top {
+            position: absolute;
+            z-index: 1;
+            top: 20px;
+            left: 0;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            margin: 0 auto;
+
+            @include bp (sm) {
+                top: 32px;
+                padding: 0 32px;
+            }
+
             // Back
             .back {
-            position: absolute;
+                display: flex;
-            z-index: 2;
+                align-items: center;
-            left: 32px;
-            top: 32px;
                 color: #fff;
-            text-decoration: none;
                 font-size: rem(14px);
                 color: $color-cream;
-            max-width: 76px;
+                text-decoration: none;
 
                 @include bp (sm) {
                     max-width: none;
                     font-size: rem(18px);
                 }
+
+                svg {
+                    margin-right: 8px;
+                }
             }
             // Shop
             .shop-title {
-            position: absolute;
-            z-index: 2;
-            top: 32px;
-            left: 50%;
-            transform: translateX(-50%);
                 font-size: rem(14px);
                 color: $color-cream;
 
@@ -105,6 +117,7 @@
                     font-size: rem(18px);
                 }
             }
+        }
 
         // Site Title
         h1 {
@@ -114,12 +127,28 @@
             left: 50%;
             width: 100%;
             transform: translate3d(-50%, -50%, 0);
-            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            // font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
             text-align: center;
 
+
+            @include bp (sm) {
+                top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
+                left: 0;
+                font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
+                transform: none;
+            }
+            @include bp (md) {
+                top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
+                font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
+            }
+
             span, strong {
                 color: #fff;
             }
+            span {
+                font-weight: 300;
+            }
         }
 
         // Background Image
@@ -160,6 +189,7 @@
             position: absolute;
             z-index: 20;
             bottom: 0;
+            left: 0;
             width: 100%;
 
             @include bp (md) {
@@ -167,6 +197,8 @@
             }
 
             .container {
+                padding: 0 16px 24px;
+
                 @include bp (md) {
                     display: grid;
                     grid-template-columns: 15% auto 15%;
@@ -179,8 +211,13 @@
 
             // Shop
             p {
+                text-align: center;
+                margin-bottom: 8px;
+
+                @include bp (md) {
                     margin-right: auto;
                 }
+            }
 
             // Navigation
             nav {