Create Newsletter component

src/style/_typography.scss

@@ -1,6 +1,7 @@
 // TYPOGRAPHY
 
 // Titles
+// Huge
 .title-huge {
     font-size: clamp(200px, 38vw, 700px);
     font-family: $font-serif;
@@ -8,18 +9,31 @@
     letter-spacing: -0.04em;
 }
 
+// Small
+.title-small {
+    color: $color-secondary;
+    font-size: rem(28px);
+    font-weight: 400;
+    line-height: 1.4;
+    font-family: $font-serif;
+}
+
 
 // Texts
+.text-large {
+    font-size: rem(32px);
+    font-family: $font-sans;
+    font-weight: 400;
+    line-height: 1.5;
+}
 .text-medium {
     font-size: rem(28px);
     font-family: $font-sans;
     font-weight: 300;
     line-height: 1.5;
 }
-
-.text-large {
-    font-size: rem(32px);
-    font-family: $font-sans;
+.text-small {
+    font-size: rem(22px);
     font-weight: 400;
     line-height: 1.5;
 }

src/style/_variables.scss

@@ -8,6 +8,7 @@ $color-secondary-bright: #FF0536;
 $color-text: #333;
 $color-tertiary: #FFE0C5;
 $color-lightpurple: #8B50B2;
+$color-lilas-bright: #C78FEC;
 $color-gray: #666;
 $color-lightgray: #999;
 $color-shadow-brown: #7A5D44;
@@ -42,7 +43,7 @@ $base-width: 1600 !default;
 
 // Grid
 $cols-m: 12 !default;
-$cols-d: 32 !default;
+$cols-d: 24 !default;
 
 
 /* Directories

src/style/atoms/_arrow.scss

@@ -0,0 +1,9 @@
+.arrow {
+    display: block;
+
+    &--white {
+        path {
+            fill: #fff;
+        }
+    }
+}

src/style/organisms/_newsletter.scss

@@ -0,0 +1,92 @@
+.newsletter {
+    margin-bottom: 88px;
+
+    &__wrapper {
+        --columns: 20;
+        background-color: $color-primary-dark;
+        grid-column: 3 / span var(--columns);
+        padding: 80px 0;
+
+        @include bp (sd) {
+            --columns: 18;
+            grid-column: 4 / span var(--columns);
+        }
+    }
+
+    // About
+    &__about {
+        grid-column: 3 / span 6;
+        margin: auto 0;
+
+        // Text
+        p {
+            margin: 16px 0;
+        }
+
+        // Past issues
+        a {
+            text-decoration: none;
+            color: $color-lilas-bright;
+            font-size: rem(14px);
+
+            span {
+                margin-left: 12px;
+                border-bottom: 1px solid $color-lilas-bright;
+            }
+        }
+    }
+    // Signup
+    &__signup {
+        grid-column: 11 / span 6;
+        margin: auto 0;
+        justify-content: center;
+
+        span {
+            font-size: rem(16px);
+            line-height: 1.2;
+            font-weight: 300;
+            color: rgba($color-tertiary, 0.6);
+        }
+    }
+
+    // Form
+    &__email {
+        position: relative;
+        box-shadow: inset 0 0 0 2px $color-secondary;
+        border-radius: 100vh;
+        padding: 0 30px;
+        margin-bottom: 8px;
+        display: flex;
+        height: 64px;
+        max-width: 400px;
+
+        input {
+            background: none;
+            font-family: $font-sans;
+            font-weight: 400;
+            font-size: rem(18px);
+            border: none;
+            color: #fff;
+
+            &::placeholder {
+                color: #fff;
+                opacity: 1;
+            }
+        }
+        button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            margin-left: 32px;
+            background-color: $color-secondary;
+            height: 32px;
+            width: 32px;
+            flex-shrink: 0;
+            border-radius: 100vh;
+        }
+    }
+}

src/style/style.scss

@@ -25,6 +25,7 @@
 // Atoms
 @import "atoms/button";
 @import "atoms/badge";
+@import "atoms/arrow";
 
 // Molecules
 @import "molecules/photo-card";
@@ -32,6 +33,7 @@
 
 // Organisms
 @import "organisms/locations";
+@import "organisms/newsletter";
 
 
 // Pages