Create global style for big sans serif title + change some responsive fonts

src/components/organisms/Banner.svelte

@@ -80,7 +80,7 @@
     </div>
 
     <div class="banner__title">
-        <h1>{title}</h1>
+        <h1 class="title-big-sans">{title}</h1>
     </div>
 
     <Image

src/components/organisms/ShopBanner.svelte

@@ -106,7 +106,7 @@
     </div>
 
     <div class="shop-page__title">
-        <h1>Shop</h1>
+        <h1 class="title-big-sans">Shop</h1>
     </div>
 
     <nav class="shop-page__nav">

src/style/_typography.scss

@@ -63,7 +63,22 @@
     letter-spacing: -0.025em;
 
     @include bp (sm) {
-        font-size: clamp(#{rem(28px)}, 7vw, #{rem(48px)});
+        font-size: rem(32px);
+    }
+    @include bp (md) {
+        font-size: clamp(#{rem(32px)}, 3.5vw, #{rem(48px)});
+    }
+}
+
+// Big - Sans Sefif
+.title-big-sans {
+    font-size: rem(40px);
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+
+    @include bp (sm) {
+        font-size: clamp(#{rem(40px)}, 6vw, #{rem(56px)})
     }
 }
 
@@ -190,7 +205,7 @@
     font-size: rem(14px);
     line-height: 1.3;
 
-    @include bp (sm) {
+    @include bp (md) {
         font-size: rem(16px);
         line-height: 1.4;
     }

src/style/organisms/_banner.scss

@@ -19,18 +19,9 @@
         width: 100%;
         transform: translate3d(-50%, -50%, 0);
 
-        @include bp (sm) {
-            // top: 50%;
-            // left: 0;
-            // transform: none;
-        }
-
         h1 {
-            font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
-            font-weight: 400;
-            text-shadow: 0px 8px 12px rgba(#000, 0.25);
             text-align: center;
-            letter-spacing: -0.02em;
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
 
             :global(span), :global(strong) {
                 color: #fff;

src/style/pages/shop/_intro.scss

@@ -80,18 +80,14 @@
         transform: translate3d(-50%, -50%, 0);
 
         @include bp (sm) {
-            // top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
             top: 40%;
             left: 0;
             transform: none;
         }
 
         :global(h1) {
-            font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
-            font-weight: 400;
-            text-shadow: 0px 8px 12px rgba(#000, 0.25);
             text-align: center;
-            letter-spacing: -0.02em;
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
 
             :global(span), :global(strong) {
                 color: #fff;