From c99acb5c6d5c65992f1e2dc05f1a69e9160e0c36 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Sat, 19 Apr 2025 12:20:37 +0100
Subject: [PATCH] scss cleanup

---
 .../HeroHeadline/HeroHeadline.stories.svelte  | 20 +++---
 .../HeroHeadline/HeroHeadline.svelte          |  2 +-
 src/components/SiteFooter/CompanyLinks.svelte | 16 ++---
 src/components/SiteFooter/LegalLinks.svelte   | 20 +++---
 src/components/SiteFooter/QuickLinks.svelte   | 21 +++---
 .../SiteFooter/svgs/Facebook.svelte           |  2 +-
 .../SiteFooter/svgs/Graphics.svelte           |  2 +-
 .../SiteFooter/svgs/Instagram.svelte          |  2 +-
 .../SiteFooter/svgs/LinkedIn.svelte           |  2 +-
 .../SiteFooter/svgs/Pictures.svelte           |  2 +-
 src/components/SiteFooter/svgs/Twitter.svelte |  2 +-
 src/components/SiteFooter/svgs/Videos.svelte  |  2 +-
 src/components/SiteFooter/svgs/YouTube.svelte |  2 +-
 .../SiteHeader/MobileMenu/index.svelte        | 12 ++--
 .../SiteHeader/NavBar/DownArrow.svelte        |  2 +-
 .../NavBar/NavDropdown/MoreDropdown.svelte    | 16 ++---
 .../NavBar/NavDropdown/SectionDropdown.svelte |  4 +-
 .../NavBar/NavDropdown/Spinner/index.svelte   |  2 +-
 .../NavBar/NavDropdown/StoryCard/index.svelte |  2 +-
 .../NavBar/NavDropdown/index.svelte           | 34 +++++-----
 src/components/SiteHeader/NavBar/index.svelte |  8 +--
 src/components/SiteHeader/SiteHeader.svelte   | 14 ++--
 src/components/SiteHeader/scss/_grids.scss    | 66 ++++++++++++++-----
 src/components/SiteHeader/svgs/Close.svelte   |  2 +-
 src/components/SiteHeader/svgs/Menu.svelte    |  2 +-
 25 files changed, 143 insertions(+), 116 deletions(-)

diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
index 320f677f..7311cbd5 100644
--- a/src/components/HeroHeadline/HeroHeadline.stories.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -106,16 +106,6 @@
   </HeroHeadline>
   <style lang="scss">
     .hero-wrapper {
-      .custom-hero.headline {
-        // Adjust vertical positioning
-        align-items: flex-end !important;
-
-        @media (max-width: 1100px) {
-          // Adjust line length of title
-          max-width: var(--normal-column-width) !important;
-        }
-      }
-
       // Make hero shorter than 100vh
       --heroHeight: 85svh;
 
@@ -132,6 +122,16 @@
       @media (max-width: 960px) and (orientation: landscape) {
         --heroHeight: 200svh;
       }
+
+      .custom-hero.headline {
+        // Adjust vertical positioning
+        align-items: flex-end !important;
+
+        @media (max-width: 1100px) {
+          // Adjust line length of title
+          max-width: var(--normal-column-width) !important;
+        }
+      }
     }
 
     // Override default fixed height for hero layout in embeds
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
index 7f782581..afc25cc0 100644
--- a/src/components/HeroHeadline/HeroHeadline.svelte
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -217,7 +217,6 @@
     }
 
     :global(.background-hero .headline) {
-      @include mixins.fmt-0;
       z-index: 1;
       display: flex;
       align-items: center;
@@ -229,6 +228,7 @@
       height: var(--heroHeight, 100svh);
       max-height: 1800px;
       transform: translateX(-50%);
+      @include mixins.fmt-0;
 
       @media (max-width: 690px) {
         padding: 0 15px;
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index d5bbba2b..443dc930 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -59,15 +59,14 @@
 {/if}
 
 <style lang="scss">
-  @import '../SiteHeader/scss/_breakpoints.scss';
-  @import '../SiteHeader/scss/_grids.scss';
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
 
-  @import '../../scss/mixins';
+  @use '../../scss/mixins' as *;
   .content-container {
-    @include max-width;
-
     width: 100%;
     margin: 0 auto;
+    @include breakpoints.max-width;
   }
 
   .company {
@@ -76,7 +75,7 @@
     box-sizing: border-box;
 
     .content-container {
-      @include responsive-columns(12);
+      @include grids.responsive-columns(12);
     }
   }
 
@@ -84,9 +83,8 @@
     border-top: 1px solid var(--nav-rules);
 
     .content-container {
-      @include spacing-single(padding-left padding-right);
-
       box-sizing: border-box;
+      @include grids.spacing-single(padding-left padding-right);
     }
   }
   .company .content-container {
@@ -100,7 +98,7 @@
       grid-column: 7 / span 5;
     }
 
-    @include at-4-columns {
+    @include grids.at-4-columns {
       .company-info,
       .social {
         grid-column: 1 / span 4;
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index 8a3d485a..306c78bb 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -61,16 +61,15 @@
 {/if}
 
 <style lang="scss">
-  @import '../SiteHeader/scss/_breakpoints.scss';
-  @import '../SiteHeader/scss/_grids.scss';
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
 
-  @import '../../scss/mixins';
+  @use '../../scss/mixins' as *;
 
   .content-container {
-    @include max-width;
-
     width: 100%;
     margin: 0 auto;
+    @include breakpoints.max-width;
   }
 
   .legal {
@@ -79,7 +78,7 @@
     box-sizing: border-box;
 
     .content-container {
-      @include responsive-columns(12);
+      @include grids.responsive-columns(12);
     }
   }
 
@@ -87,14 +86,13 @@
     border-top: 1px solid var(--nav-rules);
 
     .content-container {
-      @include spacing-single(padding-left padding-right);
-
       box-sizing: border-box;
+      @include grids.spacing-single(padding-left padding-right);
     }
   }
 
   .legal .content-container {
-    @include spacing-50(grid-row-gap);
+    @include grids.spacing-50(grid-row-gap);
 
     .ad-links {
       grid-column: 1 / span 5;
@@ -118,8 +116,8 @@
       justify-self: end;
     }
 
-    @include at-4-columns {
-      @include spacing-single(grid-row-gap);
+    @include grids.at-4-columns {
+      @include grids.spacing-single(grid-row-gap);
 
       .ad-links,
       .misc-links,
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
index cccf2b98..19d2973a 100644
--- a/src/components/SiteFooter/QuickLinks.svelte
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -148,15 +148,15 @@
 {/if}
 
 <style lang="scss">
-  @import '../SiteHeader/scss/_breakpoints.scss';
-  @import '../SiteHeader/scss/_grids.scss';
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
 
-  @import '../../scss/mixins';
+  @use '../../scss/mixins' as *;
 
   .content-container {
-    @include max-width;
     width: 100%;
     margin: 0 auto;
+    @include breakpoints.max-width;
   }
 
   .quick-links {
@@ -165,7 +165,7 @@
     box-sizing: border-box;
 
     .content-container {
-      @include responsive-columns(12);
+      @include grids.responsive-columns(12);
     }
 
     ul {
@@ -192,9 +192,8 @@
     max-width: 100%;
 
     .content-container {
-      @include spacing-single(padding-left padding-right);
-
       box-sizing: border-box;
+      @include grids.spacing-single(padding-left padding-right);
     }
 
     h3 {
@@ -206,13 +205,13 @@
   }
 
   .quick-links .content-container {
-    @include spacing-single(grid-row-gap);
+    @include grids.spacing-single(grid-row-gap);
 
     section.link-group {
       grid-column: auto / span 2;
       margin: 0;
 
-      @include above-4-columns {
+      @include grids.above-4-columns {
         &:last-child {
           grid-column: 10 / span 3;
         }
@@ -232,11 +231,11 @@
       grid-column: 7 / span 3;
       grid-row: 1;
 
-      @include for-tablet-down {
+      @include breakpoints.for-tablet-down {
         grid-column: 9 / span 3;
       }
 
-      @include for-mobile {
+      @include breakpoints.for-mobile {
         grid-column: 1 / span 2;
         grid-row: 2;
       }
diff --git a/src/components/SiteFooter/svgs/Facebook.svelte b/src/components/SiteFooter/svgs/Facebook.svelte
index 5b384732..045cd7bf 100644
--- a/src/components/SiteFooter/svgs/Facebook.svelte
+++ b/src/components/SiteFooter/svgs/Facebook.svelte
@@ -18,7 +18,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/Graphics.svelte b/src/components/SiteFooter/svgs/Graphics.svelte
index 43f60854..c15bb5f4 100644
--- a/src/components/SiteFooter/svgs/Graphics.svelte
+++ b/src/components/SiteFooter/svgs/Graphics.svelte
@@ -14,7 +14,7 @@
 </svg>
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/Instagram.svelte b/src/components/SiteFooter/svgs/Instagram.svelte
index 9628d0ba..1e45cc2b 100644
--- a/src/components/SiteFooter/svgs/Instagram.svelte
+++ b/src/components/SiteFooter/svgs/Instagram.svelte
@@ -20,7 +20,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/LinkedIn.svelte b/src/components/SiteFooter/svgs/LinkedIn.svelte
index f3e9b313..bb3505c8 100644
--- a/src/components/SiteFooter/svgs/LinkedIn.svelte
+++ b/src/components/SiteFooter/svgs/LinkedIn.svelte
@@ -18,7 +18,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/Pictures.svelte b/src/components/SiteFooter/svgs/Pictures.svelte
index da68a4dc..2d157439 100644
--- a/src/components/SiteFooter/svgs/Pictures.svelte
+++ b/src/components/SiteFooter/svgs/Pictures.svelte
@@ -10,7 +10,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/Twitter.svelte b/src/components/SiteFooter/svgs/Twitter.svelte
index dbc6e98a..1c5e81c9 100644
--- a/src/components/SiteFooter/svgs/Twitter.svelte
+++ b/src/components/SiteFooter/svgs/Twitter.svelte
@@ -20,7 +20,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/Videos.svelte b/src/components/SiteFooter/svgs/Videos.svelte
index 05292023..937bda42 100644
--- a/src/components/SiteFooter/svgs/Videos.svelte
+++ b/src/components/SiteFooter/svgs/Videos.svelte
@@ -10,7 +10,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteFooter/svgs/YouTube.svelte b/src/components/SiteFooter/svgs/YouTube.svelte
index 62b715d2..cadb5e09 100644
--- a/src/components/SiteFooter/svgs/YouTube.svelte
+++ b/src/components/SiteFooter/svgs/YouTube.svelte
@@ -18,7 +18,7 @@
 >
 
 <style lang="scss">
-  @import './../../SiteHeader/scss/_colors.scss';
+  @use './../../SiteHeader/scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index d4afd107..e2dc2dd0 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -65,10 +65,10 @@
 {/if}
 
 <style lang="scss">
-  @import '../scss/_grids.scss';
-  @import '../scss/_colors.scss';
-  @import '../scss/_z-indexes.scss';
-  @import '../../../scss/mixins';
+  @use '../scss/_grids.scss' as *;
+  @use '../scss/_colors.scss' as *;
+  @use '../scss/_z-indexes.scss' as *;
+  @use '../../../scss/mixins' as *;
 
   $mobile-nav-height: 56px;
 
@@ -140,17 +140,17 @@
   }
 
   .header {
-    @include spacing-single(padding-left padding-right);
     border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+    @include spacing-single(padding-left padding-right);
   }
 
   .section {
-    @include spacing-single(padding-left padding-right);
     padding-top: 16px;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--tr-muted-grey);
     width: 100%;
     max-width: 100%;
+    @include spacing-single(padding-left padding-right);
 
     .subsections {
       margin: 20px 0 0;
diff --git a/src/components/SiteHeader/NavBar/DownArrow.svelte b/src/components/SiteHeader/NavBar/DownArrow.svelte
index 6f30dc51..23751bc3 100644
--- a/src/components/SiteHeader/NavBar/DownArrow.svelte
+++ b/src/components/SiteHeader/NavBar/DownArrow.svelte
@@ -20,7 +20,7 @@
 </svg>
 
 <style lang="scss">
-  @import './../scss/_colors.scss';
+  @use './../scss/_colors.scss' as *;
   svg {
     margin-left: 4px;
     width: 10px;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
index b7c3ceca..de0cb051 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
@@ -34,11 +34,11 @@
 </NavDropdown>
 
 <style lang="scss">
-  @import '../../scss/_colors.scss';
-  @import '../../scss/_breakpoints.scss';
-  @import '../../scss/_eases.scss';
-  @import '../../scss/_grids.scss';
-  @import '../../scss/_z-indexes.scss';
+  @use '../../scss/_colors.scss' as *;
+  @use '../../scss/_breakpoints.scss' as breakpoints;
+  @use '../../scss/_eases.scss' as *;
+  @use '../../scss/_grids.scss' as grids;
+  @use '../../scss/_z-indexes.scss' as *;
 
   a {
     text-decoration: none;
@@ -52,7 +52,7 @@
   .more-sections {
     position: relative;
 
-    @include for-tablet-down {
+    @include breakpoints.for-tablet-down {
       display: flex;
       flex-direction: row;
       column-gap: 64px;
@@ -67,10 +67,10 @@
     .subsections {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      @include spacing-single(grid-column-gap);
       padding: 0;
       margin: 0;
       list-style: none;
+      @include grids.spacing-single(grid-column-gap);
 
       li {
         margin: 0;
@@ -98,10 +98,10 @@
       font-size: 16px;
       display: inline-block;
       color: var(--nav-primary, var(--tr-dark-grey));
+      text-decoration: none;
       @media (min-width: 1300px) {
         font-size: 18px;
       }
-      text-decoration: none;
       &:hover {
         text-decoration: underline !important;
       }
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
index 079233d4..02afa1c8 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -43,8 +43,8 @@
 </NavDropdown>
 
 <style lang="scss">
-  @import '../../scss/_colors.scss';
-  @import '../../scss/_breakpoints.scss';
+  @use '../../scss/_colors.scss' as *;
+  @use '../../scss/_breakpoints.scss' as *;
 
   a {
     text-decoration: none;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
index ec50d561..08c64ef4 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
@@ -5,7 +5,7 @@
 </div>
 
 <style lang="scss">
-  @import '../../../scss/_colors.scss';
+  @use '../../../scss/_colors.scss' as *;
 
   @keyframes spinner {
     to {
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
index bb5c75c6..0572b097 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -32,7 +32,7 @@
 </div>
 
 <style lang="scss">
-  @import '../../../../../scss/mixins';
+  @use '../../../../../scss/mixins' as *;
 
   .story-card a {
     display: flex;
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
index 89eeb35f..e8899a22 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
@@ -100,11 +100,11 @@
 </div>
 
 <style lang="scss">
-  @import '../../scss/_colors.scss';
-  @import '../../scss/_breakpoints.scss';
-  @import '../../scss/_eases.scss';
-  @import '../../scss/_grids.scss';
-  @import '../../scss/_z-indexes.scss';
+  @use '../../scss/_colors.scss' as *;
+  @use '../../scss/_breakpoints.scss' as breakpoints;
+  @use '../../scss/_eases.scss' as *;
+  @use '../../scss/_grids.scss' as grids;
+  @use '../../scss/_z-indexes.scss' as *;
 
   $nav-height: 64px;
   $mobile-nav-height: 56px;
@@ -116,7 +116,7 @@
     top: $nav-height;
     width: 100%;
 
-    @include for-mobile {
+    @include breakpoints.for-mobile {
       top: $mobile-nav-height;
     }
   }
@@ -128,10 +128,10 @@
     background: var(--nav-background, $white);
 
     > .inner {
-      @include responsive-columns(12);
-      @include spacing-single(padding-left padding-right);
-      @include max-width;
       margin: 0 auto;
+      @include breakpoints.max-width;
+      @include grids.responsive-columns(12);
+      @include grids.spacing-single(padding-left padding-right);
     }
   }
 
@@ -149,11 +149,11 @@
   .submenu {
     grid-column: 1 / span 4;
 
-    @include for-extra-wide-desktop {
+    @include breakpoints.for-extra-wide-desktop {
       grid-column: 2 / span 3;
     }
 
-    @include at-4-columns {
+    @include grids.at-4-columns {
       grid-column: 1 / span 2;
     }
   }
@@ -163,15 +163,15 @@
     min-height: 300px;
 
     .inner {
-      @include spacing-single(padding-left);
       border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
+      @include grids.spacing-single(padding-left);
     }
 
-    @include for-extra-wide-desktop {
+    @include breakpoints.for-extra-wide-desktop {
       grid-column: 5 / span 7;
     }
 
-    @include at-4-columns {
+    @include grids.at-4-columns {
       grid-column: 3 / span 2;
     }
   }
@@ -179,7 +179,6 @@
   .story-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    @include spacing-single(grid-column-gap);
     list-style: none;
     padding: 0;
     margin: 20px 0 0 0;
@@ -190,7 +189,8 @@
     line-height: 1.5;
     color: var(--nav-primary, #404040);
 
-    @include at-4-columns {
+    @include grids.spacing-single(grid-column-gap);
+    @include grids.at-4-columns {
       grid-template-columns: repeat(1, 1fr);
     }
   }
@@ -210,7 +210,7 @@
       padding-top: 20px;
     }
 
-    @include at-4-columns {
+    @include grids.at-4-columns {
       &:nth-child(2) {
         padding-top: 20px;
       }
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index feb0c9a6..0bb66c5b 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -126,10 +126,10 @@
 </div>
 
 <style lang="scss">
-  @import './../scss/_colors.scss';
-  @import './../scss/_breakpoints.scss';
-  @import './../scss/_z-indexes.scss';
-  @import '../../../scss/mixins';
+  @use './../scss/_colors.scss' as *;
+  @use './../scss/_breakpoints.scss' as *;
+  @use './../scss/_z-indexes.scss' as *;
+  @use '../../../scss/mixins' as *;
 
   $nav-height: 64px;
   $mobile-nav-height: 56px;
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index b5064fec..876bd73d 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -102,11 +102,11 @@
 />
 
 <style lang="scss">
-  @import './scss/_grids.scss';
-  @import './scss/_colors.scss';
-  @import './scss/_eases.scss';
-  @import './scss/_breakpoints.scss';
-  @import './scss/_z-indexes.scss';
+  @use './scss/_grids.scss' as grids;
+  @use './scss/_colors.scss' as *;
+  @use './scss/_eases.scss' as *;
+  @use './scss/_breakpoints.scss' as *;
+  @use './scss/_z-indexes.scss' as *;
 
   $nav-height: 64px;
   $mobile-nav-height: 56px;
@@ -149,13 +149,13 @@
   }
 
   .main-bar {
-    @include spacing-single(padding-left padding-right);
     margin: 0 auto;
     box-sizing: border-box;
     display: flex;
     height: $nav-height;
     justify-content: space-between;
     @include max-width;
+    @include grids.spacing-single(padding-left padding-right);
 
     @include for-mobile {
       height: $mobile-nav-height;
@@ -209,10 +209,10 @@
   }
 
   .mobile-menu {
+    margin-left: 8px;
     @include for-tablet-up {
       display: none;
     }
-    margin-left: 8px;
     .menu-button {
       width: 40px;
       height: 40px;
diff --git a/src/components/SiteHeader/scss/_grids.scss b/src/components/SiteHeader/scss/_grids.scss
index e0501a1e..28132641 100644
--- a/src/components/SiteHeader/scss/_grids.scss
+++ b/src/components/SiteHeader/scss/_grids.scss
@@ -1,99 +1,131 @@
 @use 'sass:math';
 
-@import '_breakpoints.scss';
+@use '_breakpoints.scss' as *;
 
 @mixin spacing-single($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(32, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(32, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(16, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(16, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (32px * $delta);
+      & {
+        #{$property}: (32px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-single-half($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (calc(16 / 1440) * 100vw * $delta);
+    & {
+      #{$property}: (calc(16 / 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(8, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(8, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (16px * $delta);
+      & {
+        #{$property}: (16px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-single-34($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(12, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(12, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (24px * $delta);
+      & {
+        #{$property}: (24px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-150($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(48, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(48, 1440) * 100vw * $delta);
+    }
   }
 
   @include for-tablet-down {
     @each $property in $properties {
-      #{$property}: (math.div(24, 375) * 100vw * $delta);
+      & {
+        #{$property}: (math.div(24, 375) * 100vw * $delta);
+      }
     }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (48px * $delta);
+      & {
+        #{$property}: (48px * $delta);
+      } 
     }
   }
 }
 
 @mixin spacing-75($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (24px * $delta);
+      & {
+        #{$property}: (24px * $delta);
+      }
     }
   }
 }
 
 @mixin spacing-50($properties, $delta: 1) {
   @each $property in $properties {
-    #{$property}: (math.div(16, 1440) * 100vw * $delta);
+    & {
+      #{$property}: (math.div(16, 1440) * 100vw * $delta);
+    }
   }
 
   @include above-max {
     @each $property in $properties {
-      #{$property}: (16px * $delta);
+      & {
+        #{$property}: (16px * $delta);
+      }
     }
   }
 }
diff --git a/src/components/SiteHeader/svgs/Close.svelte b/src/components/SiteHeader/svgs/Close.svelte
index d1a42b01..0a6d3595 100644
--- a/src/components/SiteHeader/svgs/Close.svelte
+++ b/src/components/SiteHeader/svgs/Close.svelte
@@ -11,7 +11,7 @@
 >
 
 <style lang="scss">
-  @import './../scss/_colors.scss';
+  @use './../scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }
diff --git a/src/components/SiteHeader/svgs/Menu.svelte b/src/components/SiteHeader/svgs/Menu.svelte
index e5d10843..924657cf 100644
--- a/src/components/SiteHeader/svgs/Menu.svelte
+++ b/src/components/SiteHeader/svgs/Menu.svelte
@@ -19,7 +19,7 @@
 </svg>
 
 <style lang="scss">
-  @import './../scss/_colors.scss';
+  @use './../scss/_colors.scss' as *;
   svg {
     fill: var(--nav-primary, var(--tr-dark-grey));
   }