Styles improvement

blocks/cards-multitab/cards-multitab.css

@@ -5,14 +5,46 @@
   justify-content: center;
   margin-bottom: 2rem;
   list-style: none;
+  flex-wrap: wrap;
 }
 
 .cards-multitab__card-container {
   display: flex;
   gap: 2rem;
   justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.cards-multitab__card {
+  background-color: var(--background-color);
+  width: 100%;
+}
+
+.cards-multitab__card img {
+  width: 100%;
+}
+
+.cards-multitab__card > div:last-child {
+  padding: 0 2rem 1rem;
 }
 
 .cards-multitab__card--disabled {
   display: none;
+}
+
+@media (width >= 900px) {
+  .cards-multitab__card-container {
+    gap: 1rem;
+  }
+
+  .cards-multitab__card, .cards-multitab__card img {
+    width: auto;
+  }
+}
+
+@media (width >= 1150px) {
+  .cards-multitab__card-container {
+    flex-wrap: nowrap;
+  }
 }

blocks/columns/columns.css

@@ -11,6 +11,14 @@
   order: 1;
 }
 
+.columns.bg-white > div {
+  background-color: var(--background-color);
+}
+
+.columns > div > div:last-child {
+  padding: 0 2rem 1rem;
+}
+
 .columns > div > .columns-img-col {
   order: 0;
 }

blocks/columns/columns.js

@@ -6,13 +6,17 @@ export default function decorate(block) {
   [...block.children].forEach((row) => {
     [...row.children].forEach((col) => {
       const pic = col.querySelector('picture');
+      const button = col.querySelector('a');
       if (pic) {
         const picWrapper = pic.closest('div');
         if (picWrapper && picWrapper.children.length === 1) {
           // picture is only content in column
           picWrapper.classList.add('columns-img-col');
         }
       }
+      if (button) {
+        button.classList.remove('button');
+      }
     });
   });
 }

blocks/header/header.css

@@ -10,7 +10,7 @@ header nav {
   box-sizing: border-box;
   display: grid;
   grid-template:
-    'hamburger brand tools' var(--nav-height)
+    'brand tools hamburger' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
   gap: 0 24px;

styles/styles.css

@@ -260,10 +260,16 @@ main .section.highlight {
 }
 
 main .section.card p {
-  padding: 2rem 10rem;
+  padding: 2rem;
   background-color: var(--background-color);
 }
 
+@media (width >= 900px) {
+  main .section.card p {
+    padding: 2rem 10rem;
+  }
+}
+
 /* Themes */
 body.grey {
   background-color: var(--background-grey);