From fe6516ddd390dbf14d5c5cf753556ab782f0404b Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:45:17 +0300
Subject: [PATCH] feat: move global toc to top of page on small screens

---
 styles/_globaltoc.scss | 8 +++-----
 styles/_layout.scss    | 5 +++++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/styles/_globaltoc.scss b/styles/_globaltoc.scss
index fe10e77..735b721 100644
--- a/styles/_globaltoc.scss
+++ b/styles/_globaltoc.scss
@@ -3,12 +3,10 @@
 .globaltoc {
   @extend .iati-card;
   margin: $padding-block;
-  flex: 0 0 250px;
-  align-self: flex-start;
 
-  display: none;
-  @media (min-width: 1000px) {
-    display: block;
+  @media (min-width: $screen-lg) {
+    flex: 0 0 250px;
+    align-self: flex-start;
   }
 
   & .caption {
diff --git a/styles/_layout.scss b/styles/_layout.scss
index 8b8350b..0ac7a25 100644
--- a/styles/_layout.scss
+++ b/styles/_layout.scss
@@ -3,6 +3,11 @@
 .iati-main {
   display: flex;
   padding: 0;
+  flex-direction: column;
+
+  @media (min-width: $screen-lg) {
+    flex-direction: row;
+  }
 }
 
 .document {