From 19fd54701bf82d00a29e8914d51c44a1c0dcb302 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo
 <117984204+jonatan-lledo-netcentric@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:35:17 +0100
Subject: [PATCH] Styles improvement

---
 blocks/cards-multitab/cards-multitab.css | 32 ++++++++++++++++++++++++
 blocks/columns/columns.css               |  8 ++++++
 blocks/columns/columns.js                |  4 +++
 blocks/header/header.css                 |  2 +-
 styles/styles.css                        |  8 +++++-
 5 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/blocks/cards-multitab/cards-multitab.css b/blocks/cards-multitab/cards-multitab.css
index 319a17a..a02620d 100644
--- a/blocks/cards-multitab/cards-multitab.css
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
index f2b203e..498d6e6 100644
--- a/blocks/columns/columns.css
+++ b/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;
 }
diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js
index 9b78c81..89e8302 100644
--- a/blocks/columns/columns.js
+++ b/blocks/columns/columns.js
@@ -6,6 +6,7 @@ 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) {
@@ -13,6 +14,9 @@ export default function decorate(block) {
           picWrapper.classList.add('columns-img-col');
         }
       }
+      if (button) {
+        button.classList.remove('button');
+      }
     });
   });
 }
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 53e4e61..6968aeb 100644
--- a/blocks/header/header.css
+++ b/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;
diff --git a/styles/styles.css b/styles/styles.css
index 7f4b3d7..2b808dc 100644
--- a/styles/styles.css
+++ b/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);