feat: collapse arrow link to its own column on mobile

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;
+  }
+}