1 files changed, 14 insertions, 6 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index ae8a7a8..3461b81 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -13,12 +13,12 @@ $unit-intervals: (
     '':    0
 );
 
-$font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-$font-fam--large: 'Garet Variable', $font-fam--text;
-$font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
-$font-size: 16px;
-$line-height: 1.7;
-$content--width: 56rem;
+$font-fam--text:     'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+$font-fam--large:    'Garet Variable', $font-fam--text;
+$font-fam--mono:     'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
+$font-size:          16px;
+$line-height:        1.7;
+$content--width:     56rem;
 $subcontent--indent: 2em;
 
 $gray0: hsl(220, 0%, 7%);
@@ -43,6 +43,14 @@ $gray5: hsl(220, 0%, 100%);
     )
 ));
 
+@each $breakpoint in map-keys($breakpoints) {
+    @include media('<=#{$breakpoint}') {
+        @include store((
+            --colors: ()
+        ), $breakpoint);
+    }
+}
+
 :root {
     --heading--fg: var(--colors--fg-lo);