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/_form.scss

@@ -36,8 +36,9 @@
 
 
     /*
-    ** Light version
+    ** Variants
     */
+    // Light version
     &--light {
         // Text input
         .input__text {
@@ -46,45 +47,4 @@
             }
         }
     }
-}
-
-// Text input
-.input__text {
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 48px;
-    padding: 0 24px;
-    color: #fff;
-    font-size: rem(16px);
-    font-family: $font-sans-light;
-    border: 2px solid rgba($color-secondary, 0.6);
-    border-radius: 50vh;
-    transition: border 300ms $ease-quart;
-    background: none;
-    outline: none;
-
-    @include breakpoint (sm) {
-        font-size: rem(18px);
-        height: 64px;
-        padding: 0 32px;
-    }
-
-    // States
-    &::placeholder {
-        color: #fff;
-        opacity: 0.75;
-        transition: all 300ms $ease-quart;
-    }
-    &:focus {
-        @extend %input__text--active;
-    }
-}
-
-%input__text--active {
-    border-color: $color-secondary;
-
-    &::placeholder {
-        opacity: 1;
-    }
 }

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);