Add Newsletter module when reached end on Location page

src/routes/[country]/[location]/index.svelte

@@ -8,6 +8,7 @@
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import Image from '$components/atoms/Image.svelte'
+    import Newsletter from '$components/organisms/Newsletter.svelte'
 
     export let data: any
     export let photos: any[]
@@ -169,7 +170,7 @@
     </section>
 
     <section class="location-page__next">
-        <div class="pagination" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}>
+        <div class="pagination container" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}>
             <div class="pagination__progress">
                 <span class="current">{currentPhotosAmount}</span>
                 <span>/</span>
@@ -178,7 +179,10 @@
             {#if !ended}
                 <p class="pagination__more">See more photos</p>
             {:else}
-                <p>You've seen it all!</p>
+                <p class="pagination__message">You've seen it all!</p>
+
+                <div class="container"></div>
+                <Newsletter theme="light" />
             {/if}
         </div>
     </section>

src/style/pages/_location.scss

@@ -146,10 +146,26 @@
 
     // Next photos section
     &__next {
-        margin-top: -120px;
-        padding: 240px 0 104px;
+        margin-top: 80px;
+        padding: 64px 0 48px;
         background-color: $color-tertiary;
         text-align: center;
+
+        @include bp (sm) {
+            margin-top: -120px;
+            padding-top: 240px;
+            padding-bottom: 104px;
+        }
+
+        // Newsletter block
+        .newsletter {
+            max-width: 600px;
+            margin: 56px auto 0;
+
+            @include bp (sm) {
+                margin-top: 72px;
+            }
+        }
     }
 
         // Pagination
@@ -162,7 +178,7 @@
             &__progress {
                 position: relative;
                 display: inline-block;
-                font-size: rem(160px);
+                font-size: clamp(80px, 16vw, #{rem(160px)});
                 color: rgba($color-text, 0.2);
                 font-family: $font-serif;
                 font-weight: 200;
@@ -174,7 +190,7 @@
                     margin: 0 -10px;
                 }
             }
-            p {
+            & > p {
                 display: block;
                 margin: 16px auto 0;
                 text-align: center;
@@ -186,7 +202,7 @@
                 font-size: rem(14px);
             }
             &__more {
-                color: $color-secondary;
+                color: $color-secondary !important;
             }
 
             // Disabled state