From f009611028b101c6c2755dfd34ba51f323c691c9 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 15:29:36 +0200
Subject: [PATCH] feat: collapse arrow link to its own column on mobile

---
 components/Section/Header/header.module.css | 38 ++++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css
index 93a893e31..e5d762621 100644
--- a/components/Section/Header/header.module.css
+++ b/components/Section/Header/header.module.css
@@ -1,31 +1,51 @@
 .header {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr;
   align-items: baseline;
 }
 
-.title {
-  grid-column: 1 / 2;
-}
-
+.title,
 .subtitle {
-  grid-column: 1 / 2;
+  grid-column: 1 / -1;
 }
 
 .linkWrapper {
   display: flex;
   align-items: baseline;
-  grid-column: 2 / 3;
   gap: var(--Spacing-x-half);
-  justify-self: end;
+  grid-column: 1 / -1;
+  justify-self: start;
 }
 
 .link {
   display: flex;
-  align-items: baseline;
+  align-items: center;
 }
 
 .icon {
   align-self: center;
 }
+
+@media screen and (min-width: 768px) {
+  .header {
+    grid-template-columns: 1fr auto;
+  }
+
+  .title {
+    grid-column: 1 / 2;
+  }
+
+  .subtitle {
+    grid-column: 1 / 2;
+  }
+
+  .linkWrapper {
+    grid-column: 2 / 3;
+    justify-self: end;
+  }
+
+  .link {
+    align-items: baseline;
+  }
+}