diff --git a/src/components/charts/scatter-plot/scatter-plot-styles.module.scss b/src/components/charts/scatter-plot/scatter-plot-styles.module.scss
index 25fec569f..d874a68ee 100644
--- a/src/components/charts/scatter-plot/scatter-plot-styles.module.scss
+++ b/src/components/charts/scatter-plot/scatter-plot-styles.module.scss
@@ -70,6 +70,7 @@ $chart-margin: 14px;
 .tickValue {
   @extend %annotation;
   color: $alto;
+  font-size: $font-size-tick;
 }
 
 .tickValue {
@@ -94,7 +95,7 @@ $chart-margin: 14px;
   border: 2px solid $firefly;
   width: 190px;
   overflow: hidden;
-  .countryLabel{
+  .countryLabel {
     padding: 5px;
     .name {
       @extend %title;
@@ -109,12 +110,11 @@ $chart-margin: 14px;
   }
 }
 
-
 @keyframes pulse {
   0% {
     r: 1%;
     opacity: 0;
-    animation-timing-function:cubic-bezier(1,.01,.91,.46);
+    animation-timing-function: cubic-bezier(1, 0.01, 0.91, 0.46);
   }
   50% {
     r: 1.1%;
diff --git a/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss b/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss
index 24c9aed2f..55850d108 100644
--- a/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss
+++ b/src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss
@@ -40,7 +40,7 @@
       width: 80%;
       margin-left: 20px;
 
-      .xAxisContainer{
+      .xAxisContainer {
         width: 100%;
 
         .xAxisLabelContainer {
@@ -63,8 +63,8 @@
           .yAxisIndicator {
             @extend %bodyText;
             color: $alto;
+            font-size: $font-size-tick;
           }
-
         }
       }
 
@@ -77,8 +77,8 @@
         position: relative;
         bottom: 50%;
         left: 2px;
+        font-size: $font-size-tick;
       }
-
     }
 
     .scatterPlotLegendWrapper {
@@ -88,7 +88,7 @@
       .legendTitle {
         color: $grey-text;
         font-weight: 300;
-        font-size: 13px;
+        font-size: $font-size-legend;
       }
 
       .legendItem {
@@ -96,6 +96,7 @@
         color: $white;
         display: flex;
         margin: 0;
+        font-size: $font-size-tick;
 
         .legendItemColor {
           border-radius: 50%;
@@ -158,10 +159,9 @@
       .scatterPlotChartWrapper {
         width: 100%;
 
-          .xAxisLabelContainer {
-            padding-left: calc(50% - 165px);
-
-          }
+        .xAxisLabelContainer {
+          padding-left: calc(50% - 165px);
+        }
 
         .yAxisContainer {
           bottom: 300px;
@@ -176,7 +176,6 @@
         width: 90%;
 
         .continentsLegendWrapper {
-
           .legendItemsContainer {
             display: grid;
             grid-template-columns: 1fr 1fr;
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
index 7376b4432..3e8572c31 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
@@ -87,7 +87,7 @@ function AnalyzeAreasCardComponent({
               <button
                 key={tab.slug}
                 // eslint-disable-next-line react/no-unknown-property
-                active={selectedAnalysisTab === tab.slug}
+                active={(selectedAnalysisTab === tab.slug).toString()}
                 className={cx({
                   [styles.tabButton]: true,
                   [styles.tabButtonActive]: selectedAnalysisTab === tab.slug,
@@ -128,7 +128,7 @@ function AnalyzeAreasCardComponent({
                 <RadioButton
                   id={option.slug}
                   option={{ ...option, name: option.label }}
-                  checked={selectedOption.slug === option.slug}
+                  checked={selectedOption?.slug === option.slug}
                   onChange={() => handleOptionSelection(option)}
                   theme={radioTheme}
                 />
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
index c38851c60..14f2be4f2 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
@@ -212,7 +212,7 @@ function AnalyzeAreasContainer(props) {
       newSelectedOption === WDPA_OECM_FEATURE_LAYER;
 
     const getLayersToToggle = () => {
-      const formerSelectedSlug = selectedOption.slug;
+      const formerSelectedSlug = selectedOption?.slug;
       const newLayerCategory =
         newSelectedOption === HALF_EARTH_FUTURE_TILE_LAYER
           ? LAYERS_CATEGORIES.PROTECTION
@@ -285,8 +285,8 @@ function AnalyzeAreasContainer(props) {
   };
 
   const handleOptionSelection = (option) => {
-    handleLayerToggle(option.slug);
-    changeUI({ selectedAnalysisLayer: option.slug });
+    handleLayerToggle(option?.slug);
+    changeUI({ selectedAnalysisLayer: option?.slug });
     setTooltipIsVisible(false);
   };
 
diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
index c89357fea..edcd5a3ff 100644
--- a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
+++ b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
@@ -68,7 +68,7 @@
   height: 100px;
   border: 1px dashed $white;
   border-radius: $border-radius-desktop;
-  .uploadShapeButton{
+  .uploadShapeButton {
     margin-right: $paragraph-gutter;
   }
   .label {
@@ -189,7 +189,7 @@
   }
 
   input:checked ~ .checkbox {
-    background-color: #2196F3;
+    background-color: $picton-blue;
   }
 
   .checkbox {
@@ -203,7 +203,7 @@
     background-color: #eee;
 
     &:after {
-      content: "";
+      content: '';
       position: absolute;
       display: none;
     }
@@ -219,4 +219,18 @@
     margin: 0;
     padding: 0 0 0 10px;
   }
-}
\ No newline at end of file
+}
+
+.clearFilters {
+  @extend %title;
+  background-color: $brand-color-main;
+  width: 100%;
+  height: 30px;
+  padding: 0px 20px;
+  border-radius: 2px;
+  margin-top: 10px;
+
+  &:hover {
+    background-color: $white;
+  }
+}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 51eba1137..677bb7863 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,255 +1,299 @@
 // Colors
-  $white: #fff;
-  $black: #000000;
-  $white-opacity: #FFFFFF0F;
-  $white-opacity-pdf: #FBFBFB;
-  $elephant: #0F2B3B;
-  $dark: #09141A73;
-  $robins-egg-blue: #00BDB5;
-  $oslo-gray: #7B878D;
-  $alto: #D8D8D8;
-  $athens-gray: #ECEFF2;
-  $firefly: #0A212E;
-  $saffron-mango: #FCC44A;
-  $wild-sand: #f5f5f5;
-  $shamrock: #34BD92;
-  $conifer: #92EB57;
-  $screamin-green: #93FF5F;
-  $priority-blue: #0664F6;
-  $picton-blue: #3AA8EE;
-  $gold: #F8D300;
-  $medium-purple: #8B62E9;
-  $tango: #E87926;
-  $french-rose: #EB588F;
-  $neon-carrot: #FF9C32;
-  $white-opacity: rgba(255, 255, 255, 0.1);
-  $white-opacity-20: rgba($white, 0.2);
-
-  // Project colors
-  $space-background: #09141A;
-  $navy-he: $elephant;
-
-  $brand-color-main: #18BAB4;
-  $app-background: #0a212e;
-  $brand-color-secondary: $elephant;
-  $brand-color-main-hover: darken($brand-color-main, 10);
-  $brand-color-secondary-hover: lighten($elephant, 10);
-
-  $dark-text: #222;
-  $dark-text-hover: darken($dark-text, 30%);
-  $grey-text: #A0AFB8;
-  $grey-text-hover: lighten($grey-text, 10%);
-  $dark-opacity: rgba(34, 34, 34, 0.1);
-  $_temporary-dark-text: #222;
-  $_temporary-light-text: #747474;
-  $logos-text: $oslo-gray;
-  $light-text: $white;
-
-  $mammals-color: $medium-purple;
-  $mar-mammals-color: $picton-blue;
-  $amphibians-color: $shamrock;
-  $birds-color: $saffron-mango;
-  $fishes-color: #38E5DB;
-  $reptiles-color: $conifer;
-
-  // layers
-  $carbon-layer: #FF9500;
-
-  $biodiversity-gradient: linear-gradient(0deg, rgba(9, 0, 114, .25) 0%, rgba(0, 133, 170, .6) 50%, rgba(0, 226, 136, .8) 80%, rgb(236, 255, 26) 100%);
-  $biodiversity-gradient-rotated: linear-gradient(90deg, rgba(9, 0, 114, .25) 0%, rgba(0, 133, 170, .6) 50%, rgba(0, 226, 136, .8) 80%, rgb(236, 255, 26) 100%);
-  $human-pressures-gradient: linear-gradient(90deg, rgba(0, 77, 168, 0.1) 0%, rgba(166, 0, 212, 0.2) 15%, rgba(255, 0, 0, 0.5) 54%, rgb(255, 191, 0) 100%);
-  $marine-pressures-gradient: linear-gradient(90deg, rgba(86, 0, 115, 0.15) 0%, rgba(0, 14, 224, 0.25) 50%, rgb(0, 197, 255) 94%, rgb(0, 255, 230) 100%);
-  $carbon-layer-gradient: linear-gradient(90deg, rgba($navy-he, 0.1) 0%, #A838004D 30%, $carbon-layer 100%);
-  $spi-gradient: linear-gradient(270deg, rgba(28, 83, 168, 0.1) 0%, rgba(217, 28, 220, 0.25) 17.71%, rgba(234, 28, 152, 0.35) 38.02%, rgba(248, 28, 70, 0.45) 58.85%, rgba(255, 113, 28, 0.75) 77.6%, #FFC01C 98.44%);
-  $spi-chart-gradient: linear-gradient(to bottom, #060B2B99, #1D113599, #250F3B99, #37103399, #82121399, #A7481599, #FFBF0099);
-  $challenges-view-background: #040E14;
-  $warning: #DC2626;
-
-  // country ranking
-  $endemic-species: #F8D300;
-  $non-endemic-species: #F87200;
-  $human-modification-high-color: #731CFF;
-  $human-modification-color: #B284FD;
-  $non-human-modification: #a0afb8;
-  $protection-non-needed-color: #AFB8A0;
-  $protected-areas: #008604;
-  $protection-needed: #B3E74B;
-  $high-modification: #7D2EFC;
-  $some-modification: #B284FD;
-  $future-places: $neon-carrot;
-
-  // Continent colors
-  $africa: $shamrock;
-  $antarctica: $conifer;
-  $asia: $picton-blue;
-  $europe: $gold;
-  $north-america: $medium-purple;
-  $oceania: $tango;
-  $south-america: $french-rose;
+$white: #fff;
+$black: #000000;
+$white-opacity: #ffffff0f;
+$white-opacity-pdf: #fbfbfb;
+$elephant: #0f2b3b;
+$dark: #09141a73;
+$robins-egg-blue: #00bdb5;
+$oslo-gray: #7b878d;
+$alto: #d8d8d8;
+$athens-gray: #eceff2;
+$firefly: #0a212e;
+$saffron-mango: #fcc44a;
+$wild-sand: #f5f5f5;
+$shamrock: #34bd92;
+$conifer: #92eb57;
+$screamin-green: #93ff5f;
+$priority-blue: #0664f6;
+$picton-blue: #3aa8ee;
+$gold: #f8d300;
+$medium-purple: #8b62e9;
+$tango: #e87926;
+$french-rose: #eb588f;
+$neon-carrot: #ff9c32;
+$white-opacity: rgba(255, 255, 255, 0.1);
+$white-opacity-20: rgba($white, 0.2);
+
+// Project colors
+$space-background: #09141a;
+$navy-he: $elephant;
+
+$brand-color-main: #18bab4;
+$app-background: #0a212e;
+$brand-color-secondary: $elephant;
+$brand-color-main-hover: darken($brand-color-main, 10);
+$brand-color-secondary-hover: lighten($elephant, 10);
+
+$dark-text: #222;
+$dark-text-hover: darken($dark-text, 30%);
+$grey-text: #a0afb8;
+$grey-text-hover: lighten($grey-text, 10%);
+$dark-opacity: rgba(34, 34, 34, 0.1);
+$_temporary-dark-text: #222;
+$_temporary-light-text: #747474;
+$logos-text: $oslo-gray;
+$light-text: $white;
+
+$mammals-color: $medium-purple;
+$mar-mammals-color: $picton-blue;
+$amphibians-color: $shamrock;
+$birds-color: $saffron-mango;
+$fishes-color: #38e5db;
+$reptiles-color: $conifer;
+
+// layers
+$carbon-layer: #ff9500;
+
+$biodiversity-gradient: linear-gradient(
+  0deg,
+  rgba(9, 0, 114, 0.25) 0%,
+  rgba(0, 133, 170, 0.6) 50%,
+  rgba(0, 226, 136, 0.8) 80%,
+  rgb(236, 255, 26) 100%
+);
+$biodiversity-gradient-rotated: linear-gradient(
+  90deg,
+  rgba(9, 0, 114, 0.25) 0%,
+  rgba(0, 133, 170, 0.6) 50%,
+  rgba(0, 226, 136, 0.8) 80%,
+  rgb(236, 255, 26) 100%
+);
+$human-pressures-gradient: linear-gradient(
+  90deg,
+  rgba(0, 77, 168, 0.1) 0%,
+  rgba(166, 0, 212, 0.2) 15%,
+  rgba(255, 0, 0, 0.5) 54%,
+  rgb(255, 191, 0) 100%
+);
+$marine-pressures-gradient: linear-gradient(
+  90deg,
+  rgba(86, 0, 115, 0.15) 0%,
+  rgba(0, 14, 224, 0.25) 50%,
+  rgb(0, 197, 255) 94%,
+  rgb(0, 255, 230) 100%
+);
+$carbon-layer-gradient: linear-gradient(
+  90deg,
+  rgba($navy-he, 0.1) 0%,
+  #a838004d 30%,
+  $carbon-layer 100%
+);
+$spi-gradient: linear-gradient(
+  270deg,
+  rgba(28, 83, 168, 0.1) 0%,
+  rgba(217, 28, 220, 0.25) 17.71%,
+  rgba(234, 28, 152, 0.35) 38.02%,
+  rgba(248, 28, 70, 0.45) 58.85%,
+  rgba(255, 113, 28, 0.75) 77.6%,
+  #ffc01c 98.44%
+);
+$spi-chart-gradient: linear-gradient(
+  to bottom,
+  #060b2b99,
+  #1d113599,
+  #250f3b99,
+  #37103399,
+  #82121399,
+  #a7481599,
+  #ffbf0099
+);
+$challenges-view-background: #040e14;
+$warning: #dc2626;
+
+// country ranking
+$endemic-species: #f8d300;
+$non-endemic-species: #f87200;
+$human-modification-high-color: #731cff;
+$human-modification-color: #b284fd;
+$non-human-modification: #a0afb8;
+$protection-non-needed-color: #afb8a0;
+$protected-areas: #008604;
+$protection-needed: #b3e74b;
+$high-modification: #7d2efc;
+$some-modification: #b284fd;
+$future-places: $neon-carrot;
+
+// Continent colors
+$africa: $shamrock;
+$antarctica: $conifer;
+$asia: $picton-blue;
+$europe: $gold;
+$north-america: $medium-purple;
+$oceania: $tango;
+$south-america: $french-rose;
+
+// Landcover legend
+$water: #3972b8;
+$trees: #175408;
+$flooded-vegetation: #4fab6c;
+$crops: #b89b35;
+$built-area: #ff0066;
+$bare-ground: #5b5a48;
+$snow-ice: #f2faff;
+$clouds: #fafafa;
+$rangeland: #ebe0d3;
+
+// Modal
+$modal-light-background: $athens-gray;
+
+// Animations
+$animation-time: 0.3s;
+$transition: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+
+// Font sizes
+$font-size-xxxs: 8px;
+$font-size-xxs: 10px;
+$font-size-xs: 12px;
+$font-size-sm: 14px;
+$font-size-base: 1rem;
+$font-size-legend: 17px;
+$font-size-tick: 18px;
+$font-size-rg: 24px;
+$font-size-xl: 32px;
+$font-size-xxl: 40px;
+
+//font-weights
+$font-weight-light: lighter;
+$font-weight: normal;
+$font-weight-bold: bold;
+$font-weight-semibold: semibold;
+
+$font-family-1: 'Open Sans', sans-serif;
+$font-family-1-light: 'Open Sans', sans-serif;
+$font-family-serif: 'ivypresto-display', serif;
+$font-family-sans-serif: 'Open Sans', sans-serif;
+
+// Layout
+$site-gutter: 20px;
+$widget-button-size: 30px;
+$rounded-button-size: 42px;
+$he-project-logo-size: 52px;
+$nav-bar-height: 75px;
+// Blur
+$blur-level: 16px;
+
+// Box shadow
+$box-shadow-strong: 0 2px 10px 0 $firefly;
+$box-shadow-soft: 0px 2px 10px rgba(10, 33, 46, 0.2);
+$box-shadow-light: 0px 1px 2px rgba(0, 0, 0, 0.05);
+$box-shadow-light-bottom-large: 0px 3px 2px rgba(0, 0, 0, 0.05);
+
+// Global
+$sidebar-margin: 24px;
+$sidebar-paddings: 20px;
+$paragraph-margin: 35px;
+$paragraph-gutter: 10px;
+$sidebar-cards-padding: 25px;
+$sidebar-border-width: 2px;
+$sidebar-border: $sidebar-border-width solid $brand-color-secondary;
+
+$sidebar-border-radius: 4px;
+
+$mobile-sidebar-side-paddings: 32px;
+
+$bottom-menu-blur: 2px;
+
+// Letter styles
+$letter-spacing: 1.5px;
+$line-height: 14px;
+$line-height-lg: 22px;
+
+// Sidebar
+$sidebar-vertical-flow: 1em;
+$layout-top-margin: 15px;
+$sidebar-top-margin: 30px;
+$local-sidebar-top-margin: 20px;
+$high-sidebar-top-margin: 268px;
+$sidebar-header-height: 100px;
+$sidebar-header-height-mobile: 150px;
+$ui-left-top: calc(#{$sidebar-top-margin} + #{$he-project-logo-size});
+$sidebar-width: 420px; // use this for entry boxes and sidebar width
+$country-sidebar-width: 490px;
+$local-sidebar-width: 420px;
+$widgetsTopMargin: 8px;
+$cards-bottom-margin: 8px;
+$border-radius-desktop: 2px;
+$border-radius-mobile: 16px 16px 0 0;
+$counter-size: 25px;
+// featured cards
+$card-max-width: 820px;
+$card-border-radius: 6px;
+// country scene
+$country-scene-chart-width: calc(90vw - #{$country-sidebar-width});
+
+//z indexes
+$max-z-index: 100001;
+
+$over-modal: 30;
+$over-all: 20;
+$over-front: 15;
+$dropdown: 10;
+$bring-to-front: 5;
+$default-z-index: 1;
+$send-to-back: 0;
+$under-back: -1;
+
+// Breakpoints
+$breakpoint-mobile-only: 44.9375rem; // 719px / 16px
+$breakpoint-mobile-landscape: 57.125rem; // 914px
+$breakpoint-tablet-portrait: 45rem; // 720px / 16px
+$breakpoint-tablet-landscape: 56.25rem; // 900px / 16px
+$breakpoint-tablet-only: 74.9375rem; // 1199px
+$breakpoint-desktop: 75rem; // 1200px / 16px
+
+// Media queries
+$mobile-only: 'screen and (max-width: #{$breakpoint-mobile-only})';
+$mobile-landscape: 'screen and (max-width: #{$breakpoint-mobile-landscape}) and (orientation:landscape)';
+$tablet-only: 'screen and (max-width: #{$breakpoint-tablet-only})';
+$tablet-portrait: 'screen and (min-width: #{$breakpoint-tablet-portrait})';
+$tablet-landscape: 'screen and (min-width: #{$breakpoint-tablet-landscape}) and (max-width: #{$breakpoint-desktop}) and (orientation:landscape)';
+$desktop: 'screen and (min-width: #{$breakpoint-desktop})';
+
+:export {
+  // COLORS
+  shamrock: $shamrock;
+  conifer: $conifer;
+  dark-text: $dark-text;
+  gold: $gold;
+  french-rose: $french-rose;
+  medium-purple: $medium-purple;
+  picton-blue: $picton-blue;
+  protected-areas: $protected-areas;
+  protection-needed: $protection-needed;
+  high-modification: $high-modification;
+  primary: $shamrock;
+  some-modification: $some-modification;
+  tango: $tango;
+  firefly: $firefly;
+  navy: $navy-he;
+  white: $white;
+  white-opacity: $white-opacity;
+  white-opacity-20: $white-opacity-20;
+  athens-gray: $athens-gray;
+  oslo-gray: $oslo-gray;
 
   // Landcover legend
-  $water: #3972B8;
-  $trees: #175408;
-  $flooded-vegetation: #4FAB6C;
-  $crops: #B89B35;
-  $built-area: #FF0066;
-  $bare-ground: #5B5A48;
-  $snow-ice: #F2FAFF;
-  $clouds: #FAFAFA;
-  $rangeland: #EBE0D3;
-
-
-  // Modal
-  $modal-light-background: $athens-gray;
-
-  // Animations
-  $animation-time: 0.3s;
-  $transition: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-
-  // Font sizes
-  $font-size-xxxs: 8px;
-  $font-size-xxs: 10px;
-  $font-size-xs: 12px;
-  $font-size-sm: 14px;
-  $font-size-base: 1rem;
-  $font-size-rg: 24px;
-  $font-size-xl: 32px;
-  $font-size-xxl: 40px;
-
-  //font-weights
-  $font-weight-light: lighter;
-  $font-weight: normal;
-  $font-weight-bold: bold;
-  $font-weight-semibold: semibold;
-
-  $font-family-1: 'Open Sans',
-  sans-serif;
-  $font-family-1-light: 'Open Sans',
-  sans-serif;
-  $font-family-serif: 'ivypresto-display',
-  serif;
-  $font-family-sans-serif: 'Open Sans',
-  sans-serif;
-
-  // Layout
-  $site-gutter: 20px;
-  $widget-button-size: 30px;
-  $rounded-button-size: 42px;
-  $he-project-logo-size: 52px;
-  $nav-bar-height: 75px;
-  // Blur
-  $blur-level: 16px;
-
-  // Box shadow
-  $box-shadow-strong: 0 2px 10px 0 $firefly;
-  $box-shadow-soft: 0px 2px 10px rgba(10, 33, 46, 0.2);
-  $box-shadow-light: 0px 1px 2px rgba(0, 0, 0, 0.05);
-  $box-shadow-light-bottom-large: 0px 3px 2px rgba(0, 0, 0, 0.05);
-
-  // Global
-  $sidebar-margin: 24px;
-  $sidebar-paddings: 20px;
-  $paragraph-margin: 35px;
-  $paragraph-gutter: 10px;
-  $sidebar-cards-padding: 25px;
-  $sidebar-border-width: 2px;
-  $sidebar-border: $sidebar-border-width solid $brand-color-secondary;
-
-  $sidebar-border-radius: 4px;
-
-  $mobile-sidebar-side-paddings: 32px;
-
-  $bottom-menu-blur: 2px;
-
-  // Letter styles
-  $letter-spacing: 1.5px;
-  $line-height: 14px;
-  $line-height-lg: 22px;
-
-  // Sidebar
-  $sidebar-vertical-flow: 1em;
-  $layout-top-margin: 15px;
-  $sidebar-top-margin: 30px;
-  $local-sidebar-top-margin: 20px;
-  $high-sidebar-top-margin: 268px;
-  $sidebar-header-height: 100px;
-  $sidebar-header-height-mobile: 150px;
-  $ui-left-top: calc(#{$sidebar-top-margin} + #{$he-project-logo-size});
-  $sidebar-width: 420px; // use this for entry boxes and sidebar width
-  $country-sidebar-width: 490px;
-  $local-sidebar-width: 420px;
-  $widgetsTopMargin: 8px;
-  $cards-bottom-margin: 8px;
-  $border-radius-desktop: 2px;
-  $border-radius-mobile: 16px 16px 0 0;
-  $counter-size: 25px;
-  // featured cards
-  $card-max-width: 820px;
-  $card-border-radius: 6px;
-  // country scene
-  $country-scene-chart-width: calc(90vw - #{$country-sidebar-width});
-
-  //z indexes
-  $max-z-index: 100001;
-
-  $over-modal: 30;
-  $over-all: 20;
-  $over-front: 15;
-  $dropdown: 10;
-  $bring-to-front: 5;
-  $default-z-index: 1;
-  $send-to-back: 0;
-  $under-back: -1;
-
-  // Breakpoints
-  $breakpoint-mobile-only: 44.9375rem; // 719px / 16px
-  $breakpoint-mobile-landscape: 57.125rem; // 914px
-  $breakpoint-tablet-portrait: 45rem; // 720px / 16px
-  $breakpoint-tablet-landscape: 56.25rem; // 900px / 16px
-  $breakpoint-tablet-only: 74.9375rem; // 1199px
-  $breakpoint-desktop: 75rem; // 1200px / 16px
-
-  // Media queries
-  $mobile-only: 'screen and (max-width: #{$breakpoint-mobile-only})';
-  $mobile-landscape: 'screen and (max-width: #{$breakpoint-mobile-landscape}) and (orientation:landscape)';
-  $tablet-only: 'screen and (max-width: #{$breakpoint-tablet-only})';
-  $tablet-portrait: 'screen and (min-width: #{$breakpoint-tablet-portrait})';
-  $tablet-landscape: 'screen and (min-width: #{$breakpoint-tablet-landscape}) and (max-width: #{$breakpoint-desktop}) and (orientation:landscape)';
-  $desktop: 'screen and (min-width: #{$breakpoint-desktop})';
-
-  :export {
-    // COLORS
-    conifer: $conifer;
-    dark-text: $dark-text;
-    gold: $gold;
-    french-rose: $french-rose;
-    medium-purple: $medium-purple;
-    picton-blue: $picton-blue;
-    protected-areas: $protected-areas;
-    protection-needed:  $protection-needed;
-    high-modification: $high-modification;
-    primary: $shamrock;
-    some-modification: $some-modification;
-    tango: $tango;
-    firefly: $firefly;
-    navy: $navy-he;
-    white: $white;
-    white-opacity: $white-opacity;
-    white-opacity-20: $white-opacity-20;
-    athens-gray: $athens-gray;
-    oslo-gray: $oslo-gray;
-
-    // Landcover legend
-    water: $water;
-    trees: $trees;
-    flooded-vegetation: $flooded-vegetation;
-    crops: $crops;
-    built-area: $built-area;
-    bare-ground: $bare-ground;
-    snow-ice: $snow-ice;
-    clouds: $clouds;
-    rangeland: $rangeland;
-
-    // FONT FAMILIES
-    font-family-serif: $font-family-serif;
-  }
\ No newline at end of file
+  water: $water;
+  trees: $trees;
+  flooded-vegetation: $flooded-vegetation;
+  crops: $crops;
+  built-area: $built-area;
+  bare-ground: $bare-ground;
+  snow-ice: $snow-ice;
+  clouds: $clouds;
+  rangeland: $rangeland;
+
+  // FONT FAMILIES
+  font-family-serif: $font-family-serif;
+}