From 74ff618c23e3bb305e5afd0130ad39d3c9bf2bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 23 Oct 2021 23:19:51 +0200
Subject: [PATCH] Fix Modules responsive

---
 src/style/layout/_modules.scss       |  2 +-
 src/style/organisms/_newsletter.scss | 11 +++++++----
 src/style/organisms/_shop.scss       |  8 ++++++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/style/layout/_modules.scss b/src/style/layout/_modules.scss
index e89ed5b..2c679f7 100644
--- a/src/style/layout/_modules.scss
+++ b/src/style/layout/_modules.scss
@@ -13,7 +13,7 @@
         display: block;
         grid-column: span var(--columns);
         grid-template-columns: 1fr 40%;
-        grid-column-gap: 48px;
+        grid-column-gap: clamp(32px, 2.5vw, 48px);
         padding: 0;
 
         @include bp (sm) {
diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss
index 3060a34..be44cd1 100644
--- a/src/style/organisms/_newsletter.scss
+++ b/src/style/organisms/_newsletter.scss
@@ -1,9 +1,10 @@
 .newsletter {
-    padding: 40px 40px 48px;
-    border-radius: 12px;
+    padding: clamp(40px, 4.5vw, 64px);
+    padding-bottom: clamp(48px, 4.5vw, 72px);
+    border-radius: 8px;
 
     @include bp (sd) {
-        padding: 64px 60px 72px;
+        border-radius: 12px;
     }
 
     &__wrapper {
@@ -23,7 +24,7 @@
                 margin-bottom: 16px;
             }
         }
-        p {
+        & > p {
             margin-bottom: 32px;
             color: $color-text;
             font-weight: 200;
@@ -33,6 +34,8 @@
                 margin-bottom: 40px;
             }
         }
+
+        // Form
         .past-issues {
             &:hover {
                 &, span {
diff --git a/src/style/organisms/_shop.scss b/src/style/organisms/_shop.scss
index 54bea7d..5b4113e 100644
--- a/src/style/organisms/_shop.scss
+++ b/src/style/organisms/_shop.scss
@@ -2,7 +2,11 @@
     overflow: hidden;
     background: #fff;
     color: $color-text;
-    border-radius: 12px;
+    border-radius: 8px;
+
+    @include bp (sd) {
+        border-radius: 12px;
+    }
 
     .content {
         @include bp (sm) {
@@ -43,7 +47,7 @@
         border-radius: 12px;
 
         @include bp (sm) {
-            padding: 64px 72px 40px 64px;
+            padding: clamp(40px, 4.5vw, 64px) clamp(48px, 4.5vw, 72px) clamp(24px, 4.5vw, 40px) clamp(40px, 4.5vw, 64px);
         }
 
         .button {