Add and edit responsive style on homepage

2021-10-03 19:14:24 +02:00
parent f6da3c4b55
commit 54afac2ed5
11 changed files with 203 additions and 55 deletions
--- a/src/style/layout/_modules.scss
+++ b/src/style/layout/_modules.scss
@@ -1,5 +1,9 @@
 .grid-modules {
-    margin-bottom: 72px;
+    margin-bottom: 40px;
+
+    @include bp (sm) {
+        margin-bottom: 72px;
+    }

    .wrap {
        @include bp (sd) {
@@ -7,14 +11,21 @@
        }

        display: block;
-        grid-column: 2 / span 22;
+        grid-column: 1 / span var(--columns);
        grid-template-columns: 1fr 40%;
        grid-column-gap: 48px;
        padding: 0;

+        @include bp (sm) {
+            grid-column: 2 / span 22;
+        }
+
        & > *:first-child {
            @include bp (sd, max) {
-                margin-bottom: 32px;
+                margin-bottom: 20px;
+            }
+            @include bp (sd) {
+                margin-bottom: 0;
            }
        }
        &:last-child {