From ac46759df446713d0e00339f554146f54cc2f154 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Thu, 7 Sep 2023 11:47:18 +0200
Subject: [PATCH] Add media queries to public.css to match original design

---
 web/static/public.css | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/static/public.css b/web/static/public.css
index 7b44196..2f83702 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -242,7 +242,7 @@ nav a {
     min-height: 6rem;
     display: flex;
     align-items: flex-end;
-    column-gap: 5rem;
+    gap: 5rem;
     padding: 5rem;
 }
 
@@ -288,7 +288,7 @@ nav a {
 
 .nature div + div {
     display: flex;
-    column-gap: 5rem;
+    gap: 5rem;
 }
 
 .nature section {
@@ -369,13 +369,13 @@ nav a {
 
 .environment .slick-arrow {
     font-size: 6rem;
+    line-height: 1;
     width: 5rem;
     height: 5rem;
     border: none !important;
     background: none;
     cursor: pointer;
     transition: transform 0.5s ease;
-    margin-right: 4rem;
 }
 
 .environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow {
@@ -384,6 +384,7 @@ nav a {
 
 .environment .slick-prev {
     order: 2;
+    margin: 2.5rem 4rem 0 0;
 }
 
 .environment .slick-prev:hover {
@@ -392,6 +393,7 @@ nav a {
 
 .environment .slick-next {
     order: 3;
+    margin: 2.5rem 7rem 0 0;
 }
 
 .environment .slick-next:hover {
@@ -402,6 +404,7 @@ nav a {
     font-weight: 900;
     font-size: calc(1.8rem + 8vw);
     line-height: 1.2em;
+    margin: 10rem 0;
 }
 
 footer {
@@ -409,3 +412,23 @@ footer {
     text-align: center;
     padding: 2.5rem;
 }
+
+@media (max-width: 64rem) {
+    .nature div + div {
+        flex-direction: column;
+    }
+
+    .nature section {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 48rem) {
+    .nature div:first-child {
+        flex-direction: column;
+    }
+
+    .nature h2 {
+        width: 100%;
+    }
+}