Fix responsive issues globally

src/routes/locations.svelte

@@ -32,7 +32,7 @@
         <Locations {locations} />
     </section>
 
-    <section class="grid-modules grid">
+    <section class="grid-modules is-spaced grid">
         <div class="wrap">
             <ShopModule />
             <NewsletterModule />

src/style/layout/_modules.scss

@@ -6,19 +6,17 @@
     }
 
     .wrap {
-        @include bp (sd) {
-            display: grid;
-        }
-
         display: block;
         grid-column: span var(--columns);
-        grid-template-columns: 1fr 40%;
-        grid-column-gap: clamp(32px, 2.5vw, 48px);
-        padding: 0;
 
         @include bp (sm) {
+            display: grid;
             grid-column: 2 / span 22;
         }
+        @include bp (sd) {
+            grid-template-columns: 1fr 40%;
+            grid-column-gap: clamp(32px, 2.5vw, 48px);
+        }
 
         & > *:first-child {
             @include bp (sd, max) {
@@ -32,4 +30,11 @@
             margin-bottom: 0;
         }
     }
+
+    // With padding
+    &.is-spaced {
+        @include bp (sm, max) {
+            padding: 0 16px;
+        }
+    }
 }

src/style/layouts/_poster.scss

@@ -14,7 +14,7 @@
         margin: clamp(72px, 24vw, 180px) 0 clamp(56px, 24vw, 120px);
 
         @include bp (sm) {
-            margin: clamp(112px, 10vw, 200px) 0 clamp(88px, 10vw, 120px);
+            margin: clamp(112px, 10vw, 200px) 0 clamp(64px, 8vw, 88px);
         }
     }
     :global(h2) {
@@ -30,7 +30,6 @@
         }
         @include bp (sm) {
             grid-column: 2 / span calc(var(--columns) - 1);
-            margin-bottom: 88px;
             font-size: clamp(200px, 20vw, 340px);
         }
     }

src/style/molecules/_poster.scss

@@ -50,14 +50,14 @@
         }
 
         & > :global(*) {
-            background: none;
-            font-size: rem(14px);
-            font-weight: 300;
-            color: $color-tertiary;
             padding: 0;
+            font-size: rem(14px);
+            font-weight: 400;
+            color: $color-tertiary;
+            background: none;
 
             &:first-child {
-                margin-right: 12px;
+                margin-right: 16px;
 
                 &:hover {
                     background: none;

src/style/pages/_explore.scss

@@ -1,3 +1,10 @@
 // Explore Page
-// .explore {
+:global(.explore) {
-// }
+    overflow: hidden;
+
+    &__locations {
+        @include bp (sm, max) {
+            margin-top: 72px;
+        }
+    }
+}

src/style/pages/_photos.scss

@@ -79,6 +79,14 @@
             }
         }
 
+        // Container
+        .container {
+            @include bp (sm, max) {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+
         // Modules
         :global(.grid-modules) {
             grid-column: span var(--columns);
@@ -490,6 +498,8 @@
     // See More Photos
     :global(.button) {
         grid-column: span var(--columns);
+        padding-left: 24px;
+        padding-right: 24px;
         grid-row: 1;
         margin: 0 auto;
 
@@ -506,6 +516,8 @@
         grid-column: span var(--columns);
         grid-row: 3;
         text-align: center;
+        display: flex;
+        align-items: baseline;
         color: rgba($color-text, 0.3);
         font-family: $font-serif;
         font-size: rem(64px);
@@ -525,7 +537,6 @@
 
         span {
             display: inline-block;
-            margin: 0 -6px;
 
             &:last-child {
                 margin-right: 0;

src/style/pages/shop/_posters.scss

@@ -2,6 +2,7 @@
 ** Shop: Posters
 */
 .shop-page__posters {
+    overflow: hidden;
     padding: clamp(56px, 10vw, 120px) 20px 72px;
     background: $color-primary-darker;
     border-bottom: solid 1px $color-primary-tertiary20 ;