Add a newsletter subscription form below locations

- One component used below Locations list and in the Pagination when all photos has been loaded
- Keep the subscribe page with the column display

src/style/molecules/_newsletter.scss

@@ -1,58 +1,109 @@
 // Newsletter
 .newsletter {
-    max-width: 360px;
-    margin: 0 auto;
-    text-align: center;
+    background-color: $color-primary-dark;
+    padding: 56px 0;
 
     @include breakpoint (sm) {
-        max-width: 444px;
+        padding: 96px 0;
+    }
+
+    .wrapper {
+        @include breakpoint (md) {
+            display: flex;
+            justify-content: space-between;
+        }
     }
 
-    // Title
     h2 {
-        margin-bottom: 40px;
         color: $color-secondary;
     }
 
     // Text
     &__text {
-        margin-bottom: 72px;
+        max-width: 400px;
+        margin: 0 auto 32px;
 
         @include breakpoint (sm) {
-            margin-bottom: 96px;
+            margin-bottom: 40px;
+        }
+        @include breakpoint (md) {
+            margin-left: 0;
+            margin-right: 48px;
+            margin-bottom: 0;
+            text-align: left;
+        }
+
+        h2 {
+            margin-bottom: 16px;
+
+            @include breakpoint (md) {
+                text-align: left;
+            }
         }
     }
 
     // Form
     .form {
+        min-width: 270px;
+        max-width: 320px;
+        margin: 0 auto;
 
-    }
+        @include breakpoint (md) {
+            min-width: 320px;
+            max-width: 440px;
+            margin: 48px 0 0;
+        }
 
-    // Notice
-    &__notice {
-        margin-top: 32px;
-    }
-
-
-    /*
-    ** Small version
-    */
-    &--small {
-        .newsletter__text {
-            max-width: 344px;
-            margin-bottom: 32px;
+        // Title (if existing)
+        h2 {
+            margin-bottom: 24px;
 
             @include breakpoint (sm) {
-                margin-bottom: 48px;
+                margin-bottom: 40px;
             }
         }
     }
 
+    // Notice
+    &__notice {
+        margin-top: 16px;
+        text-align: center;
+    }
+
 
     /*
-    ** Light version
+    ** Variants
     */
+    // Centered column mode
+    &--column {
+        max-width: 360px;
+        margin: 0 auto;
+        padding: 0;
+        background: none;
+
+        @include breakpoint (sm) {
+            max-width: 444px;
+        }
+
+        // Text
+        .newsletter__text {
+            max-width: 440px;
+            margin: 0 0 48px;
+            text-align: center;
+
+            @include breakpoint (sm) {
+                margin-bottom: 72px;
+            }
+            @include breakpoint (md) {
+                margin-bottom: 96px;
+            }
+        }
+    }
+
+    // Light version
     &--light {
+        background: none;
+
         .newsletter__notice {
             p {
                 color: rgba($color-text, 0.5);