Update Posters section

- keep carousel on medium screen
- center title
- remove subscribe module (fixes page transition scroll bug?! for now)

src/components/organisms/PostersGrid.svelte

@@ -28,7 +28,7 @@
 
     /** Init Carousel */
     const initCarousel = () => {
-        if (innerWidth < 992) {
+        if (innerWidth < 1200) {
             if (!carousel) {
                 carousel = EmblaCarousel(carouselEl, {
                     slidesToScroll: innerWidth < 550 ? 1 : 2,
@@ -58,18 +58,25 @@
             }
         } else {
             if (carousel) {
+                destroyCarousel()
+            }
+        }
+    }
+
+    /** Destroy carousel */
+    const destroyCarousel = () => {
         carousel.destroy()
         carousel = undefined
     }
-        }
-    }
 
     /** Destroy carousel for larger screens */
     const handleResize = debounce(initCarousel, 200)
 
 
     onMount(() => {
+        if (innerWidth < 1200) {
             initCarousel()
+        }
 
         // Destroy
         return () => {
@@ -85,10 +92,10 @@
     on:resize={handleResize}
 />
 
-{#if posters}
 <section class="shop-page__posters grid">
     <h3>View all of our available posters</h3>
 
+    {#if posters}
         <div class="set" bind:this={carouselEl}>
             <div class="set__content">
                 {#each posters as { location, photos_product }}
@@ -110,10 +117,5 @@
                 </ul>
             {/if}
         </div>
-
-    <div class="subscribe">
-        <label class="subscribe__text" for="newsletter_email">Subscribe to be notified when new posters become available</label>
-        <EmailForm />
-    </div>
-</section>
     {/if}
+</section>

src/style/pages/shop/_posters.scss

@@ -22,14 +22,14 @@
         text-align: center;
 
         @include bp (sm) {
-            grid-column: 3 / span 14;
+            grid-column: 1 / -1;
             max-width: 360px;
-            margin-bottom: 48px;
+            margin: 0 auto 48px;
             font-size: rem(48px);
-            text-align: left;
+            text-align: center;
         }
         @include bp (sd) {
-            margin-bottom: 0;
+            margin-bottom: 88px;
         }
     }
 
@@ -46,7 +46,7 @@
         @include bp (sm) {
             grid-column: 3 / -3;
         }
-        @include bp (md) {
+        @include bp (sd) {
             cursor: default;
         }
 
@@ -58,13 +58,16 @@
                 margin: 0 -12px;
             }
             @include bp (md) {
+
+            }
+            @include bp (sd) {
                 --gap: clamp(32px, 2.5vw, 48px);
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 gap: var(--gap);
                 margin: 0;
             }
-            @include bp (sd) {
+            @include bp (md) {
                 grid-template-columns: repeat(4, 1fr);
             }
         }
@@ -82,41 +85,13 @@
             @include bp (mob-lg) {
                 flex: 0 0 calc(50% - 24px);
             }
-            @include bp (sm) {
-                flex: 0 0 calc(50% - 24px);
-            }
             @include bp (md) {
+                flex: 0 0 calc(33.33% - 24px);
+                margin: 0 20px;
+            }
+            @include bp (sd) {
                 margin: 0 auto auto;
             }
-
-            // 3 columns
-            &:nth-child(1) {
-                @include bp (md) {
-                    margin-top: calc(var(--gap) * 2);
-                }
-            }
-            &:nth-child(2) {
-                @include bp (md) {
-                    margin-top: var(--gap);
-                }
-            }
-
-            // 4 columns
-            &:nth-child(4n + 1) {
-                @include bp (sd) {
-                    margin-top: 64px * 3;
-                }
-            }
-            &:nth-child(4n + 2) {
-                @include bp (sd) {
-                    margin-top: 64px * 2;
-                }
-            }
-            &:nth-child(4n + 3) {
-                @include bp (sd) {
-                    margin-top: 64px;
-                }
-            }
         }
 
         // Pagination
@@ -153,47 +128,4 @@
             }
         }
     }
-
-    // Subscribe
-    .subscribe {
-        grid-column: 1 / -1;
-        max-width: 380px;
-        margin: 56px auto 0;
-        text-align: center;
-
-        @include bp (md) {
-            grid-column: 14 / span 8;
-            margin-top: 0;
-            text-align: left;
-        }
-
-        &__text {
-            display: block;
-            font-size: rem(18px);
-            color: $color-cream;
-            font-weight: 300;
-            line-height: 1.5;
-            margin-bottom: 24px;
-
-            @include bp (sm) {
-                font-size: rem(22px);
-                margin-bottom: 30px;
-            }
-        }
-
-        :global(.newsletter-form) {
-            padding: 0;
-            margin: 0 auto;
-
-            @include bp (sm) {
-                margin: 0;
-            }
-        }
-        :global(.newsletter-form__email) {
-            margin-bottom: 0;
-        }
-        :global(.newsletter-form__bottom) {
-            display: none;
-        }
-    }
 }