refactor:add display grid news--wrapper on tablet

mate-academy · Oct 23, 2024 · 4b330da · 4b330da
1 parent 5aac521
commit 4b330da
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/src/styles/components/_news.scss b/src/styles/components/_news.scss
@@ -9,31 +9,33 @@
     margin-bottom: $section-mb-xxl;
   }
 
-  &-title {
-    margin-bottom: 6rem;
-
+  &--wrapper {
     @include media-tablet {
-      grid-column: span 4;
-    }
+      display: grid;
 
-    @include media-tablet-l {
-      margin-bottom: 7rem;
+      grid-auto-flow: row dense;
+
+      @include page-grid(6, $glutter-tablet);
     }
 
     @include media-decstop-xl {
-      margin-bottom: 6rem;
+      @include page-grid(12, $glutter-desctop);
     }
   }
 
-  &--wrapper {
+  &-title {
+    margin-bottom: 6rem;
+
     @include media-tablet {
-      @include page-grid(6, $glutter-tablet);
+      grid-column: span 4;
+    }
 
-      grid-auto-flow: row dense;
+    @include media-tablet-l {
+      margin-bottom: 7rem;
     }
 
     @include media-decstop-xl {
-      @include page-grid(12, $glutter-desctop);
+      margin-bottom: 6rem;
     }
   }
 }

diff --git a/src/styles/style.css b/src/styles/style.css