diff --git a/.changeset/tangy-ways-reply.md b/.changeset/tangy-ways-reply.md
new file mode 100644
index 00000000..330bc00f
--- /dev/null
+++ b/.changeset/tangy-ways-reply.md
@@ -0,0 +1,5 @@
+---
+"@wethegit/components": patch
+---
+
+Implement CSS @layer for better specificity control. Adds four layers (reset, global, utility, component) to allow easier style overrides.
diff --git a/packages/wethegit-components/src/components/back-to-top/back-to-top.module.scss b/packages/wethegit-components/src/components/back-to-top/back-to-top.module.scss
index 8c525020..951a6c8b 100644
--- a/packages/wethegit-components/src/components/back-to-top/back-to-top.module.scss
+++ b/packages/wethegit-components/src/components/back-to-top/back-to-top.module.scss
@@ -1,37 +1,39 @@
 @use "@local/styles/animation/animation-utilities" as *;
 
-.button {
-  --scale: 1;
+@layer component {
+  .button {
+    --scale: 1;
 
-  background-color: #000;
-  bottom: 1rem;
-  color: #fff;
-  opacity: 0;
-  padding: 1rem;
-  position: fixed;
-  right: 1rem;
-  transform: scale(var(--scale));
-  transition:
-    opacity 0.3s,
-    transform duration(0.2s);
-  z-index: 10;
-}
+    background-color: #000;
+    bottom: 1rem;
+    color: #fff;
+    opacity: 0;
+    padding: 1rem;
+    position: fixed;
+    right: 1rem;
+    transform: scale(var(--scale));
+    transition:
+      opacity 0.3s,
+      transform duration(0.2s);
+    z-index: 10;
+  }
 
-@media (hover: hover) {
-  .button:hover {
-    --scale: 1.1;
+  @media (hover: hover) {
+    .button:hover {
+      --scale: 1.1;
+    }
   }
-}
 
-.buttonShown {
-  opacity: 1;
-}
+  .buttonShown {
+    opacity: 1;
+  }
 
-.viewportReference {
-  height: var(--reveal-threshold, 300px);
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 100%;
+  .viewportReference {
+    height: var(--reveal-threshold, 300px);
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }
diff --git a/packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.module.scss b/packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.module.scss
index 23e6aadb..a28e7f58 100644
--- a/packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.module.scss
+++ b/packages/wethegit-components/src/components/breakpoint-snipe/breakpoint-snipe.module.scss
@@ -1,18 +1,20 @@
-.breakpointSnipe {
-  align-items: center;
-  aspect-ratio: 1/1;
-  background-color: white;
-  bottom: 0;
-  color: black;
-  display: flex;
-  line-height: 1;
-  place-content: center center;
-  position: fixed;
-  right: 0;
-  width: 40px;
-}
+@layer component {
+  .breakpointSnipe {
+    align-items: center;
+    aspect-ratio: 1/1;
+    background-color: white;
+    bottom: 0;
+    color: black;
+    display: flex;
+    line-height: 1;
+    place-content: center center;
+    position: fixed;
+    right: 0;
+    width: 40px;
+  }
 
-.breakpointSnipeDark {
-  background-color: black;
-  color: white;
+  .breakpointSnipeDark {
+    background-color: black;
+    color: white;
+  }
 }
diff --git a/packages/wethegit-components/src/components/flex/flex.module.scss b/packages/wethegit-components/src/components/flex/flex.module.scss
index 540ce8ca..332264e3 100644
--- a/packages/wethegit-components/src/components/flex/flex.module.scss
+++ b/packages/wethegit-components/src/components/flex/flex.module.scss
@@ -1,82 +1,84 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-@mixin breakpoint-classnames($prefix: "") {
-  .align#{$prefix}-flex-start {
-    align-items: flex-start;
+@layer component {
+  @mixin breakpoint-classnames($prefix: "") {
+    .align#{$prefix}-flex-start {
+      align-items: flex-start;
+    }
+
+    .align#{$prefix}-center {
+      align-items: center;
+    }
+
+    .align#{$prefix}-flex-end {
+      align-items: flex-end;
+    }
+
+    .align#{$prefix}-baseline {
+      align-items: baseline;
+    }
+
+    .align#{$prefix}-stretch {
+      align-items: stretch;
+    }
+
+    .justify#{$prefix}-flex-start {
+      justify-content: flex-start;
+    }
+
+    .justify#{$prefix}-center {
+      justify-content: center;
+    }
+
+    .justify#{$prefix}-flex-end {
+      justify-content: flex-end;
+    }
+
+    .justify#{$prefix}-space-between {
+      justify-content: space-between;
+    }
+
+    .justify#{$prefix}-space-around {
+      justify-content: space-around;
+    }
+
+    .wrap#{$prefix}-true {
+      flex-wrap: wrap;
+    }
+
+    .wrap#{$prefix}-false {
+      flex-wrap: nowrap;
+    }
+
+    .reverse#{$prefix}-true {
+      flex-direction: row-reverse;
+    }
+
+    .reverse#{$prefix}-false {
+      flex-direction: row;
+    }
   }
 
-  .align#{$prefix}-center {
-    align-items: center;
+  .flex {
+    display: flex;
   }
 
-  .align#{$prefix}-flex-end {
-    align-items: flex-end;
-  }
-
-  .align#{$prefix}-baseline {
-    align-items: baseline;
-  }
-
-  .align#{$prefix}-stretch {
-    align-items: stretch;
-  }
-
-  .justify#{$prefix}-flex-start {
-    justify-content: flex-start;
-  }
-
-  .justify#{$prefix}-center {
-    justify-content: center;
-  }
-
-  .justify#{$prefix}-flex-end {
-    justify-content: flex-end;
-  }
-
-  .justify#{$prefix}-space-between {
-    justify-content: space-between;
-  }
+  @include breakpoint-classnames;
+  @include breakpoint-classnames(-sm);
 
-  .justify#{$prefix}-space-around {
-    justify-content: space-around;
+  @media #{$md-up} {
+    @include breakpoint-classnames(-md);
   }
 
-  .wrap#{$prefix}-true {
-    flex-wrap: wrap;
+  @media #{$lg-up} {
+    @include breakpoint-classnames(-lg);
   }
 
-  .wrap#{$prefix}-false {
-    flex-wrap: nowrap;
+  @media #{$xl-up} {
+    @include breakpoint-classnames(-xl);
   }
 
-  .reverse#{$prefix}-true {
-    flex-direction: row-reverse;
+  @media #{$xxl-up} {
+    @include breakpoint-classnames(-xxl);
   }
-
-  .reverse#{$prefix}-false {
-    flex-direction: row;
-  }
-}
-
-.flex {
-  display: flex;
-}
-
-@include breakpoint-classnames;
-@include breakpoint-classnames(-sm);
-
-@media #{$md-up} {
-  @include breakpoint-classnames(-md);
-}
-
-@media #{$lg-up} {
-  @include breakpoint-classnames(-lg);
-}
-
-@media #{$xl-up} {
-  @include breakpoint-classnames(-xl);
-}
-
-@media #{$xxl-up} {
-  @include breakpoint-classnames(-xxl);
 }
diff --git a/packages/wethegit-components/src/components/grid-layout/column/column.module.scss b/packages/wethegit-components/src/components/grid-layout/column/column.module.scss
index ccb319c0..78de06b7 100644
--- a/packages/wethegit-components/src/components/grid-layout/column/column.module.scss
+++ b/packages/wethegit-components/src/components/grid-layout/column/column.module.scss
@@ -1,45 +1,47 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 @use "../styles/grid-layout-utilities" as layout;
 
-@mixin make-column-classnames($breakpoint: false) {
-  $base-class: "span";
+@layer component {
+  @mixin make-column-classnames($breakpoint: false) {
+    $base-class: "span";
 
-  @if $breakpoint {
-    $base-class: "span-#{$breakpoint}";
-  }
+    @if $breakpoint {
+      $base-class: "span-#{$breakpoint}";
+    }
 
-  @for $i from 1 through 12 {
-    .#{$base-class}-#{$i} {
-      flex: 0 0 layout.grid-calc($i);
+    @for $i from 1 through 12 {
+      .#{$base-class}-#{$i} {
+        flex: 0 0 layout.grid-calc($i);
+      }
     }
   }
-}
 
-.column {
-  flex: 1;
-  list-style: none;
-  margin: 0;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
+  .column {
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
+  }
 
-.deep {
-  padding-inline: 0;
-}
+  .deep {
+    padding-inline: 0;
+  }
 
-@include make-column-classnames;
+  @include make-column-classnames;
 
-@media #{$md-up} {
-  @include make-column-classnames(md);
-}
+  @media #{$md-up} {
+    @include make-column-classnames(md);
+  }
 
-@media #{$lg-up} {
-  @include make-column-classnames(lg);
-}
+  @media #{$lg-up} {
+    @include make-column-classnames(lg);
+  }
 
-@media #{$xl-up} {
-  @include make-column-classnames(xl);
-}
+  @media #{$xl-up} {
+    @include make-column-classnames(xl);
+  }
 
-@media #{$xxl-up} {
-  @include make-column-classnames(xxl);
+  @media #{$xxl-up} {
+    @include make-column-classnames(xxl);
+  }
 }
diff --git a/packages/wethegit-components/src/components/grid-layout/row/row.module.scss b/packages/wethegit-components/src/components/grid-layout/row/row.module.scss
index da190fe1..24ebdae0 100644
--- a/packages/wethegit-components/src/components/grid-layout/row/row.module.scss
+++ b/packages/wethegit-components/src/components/grid-layout/row/row.module.scss
@@ -1,21 +1,23 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-.row {
-  display: block;
-  inline-size: min(var(--wtc-row-width, 1440px), 100%);
-  list-style: none;
-  margin-inline: auto;
-  padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
-}
+@layer component {
+  .row {
+    display: block;
+    inline-size: min(var(--wtc-row-width, 1440px), 100%);
+    list-style: none;
+    margin-inline: auto;
+    padding-inline: calc(var(--wtc-gutter-width, 24px) * 0.5);
+  }
 
-@media #{$md-up} {
-  .row:not(.stackMedium) {
-    display: flex;
+  @media #{$md-up} {
+    .row:not(.stackMedium) {
+      display: flex;
+    }
   }
-}
 
-@media #{$lg-up} {
-  .stackMedium {
-    display: flex;
+  @media #{$lg-up} {
+    .stackMedium {
+      display: flex;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/grid-layout/styles/grid-layout.scss b/packages/wethegit-components/src/components/grid-layout/styles/grid-layout.scss
index 7e990948..05f385c3 100644
--- a/packages/wethegit-components/src/components/grid-layout/styles/grid-layout.scss
+++ b/packages/wethegit-components/src/components/grid-layout/styles/grid-layout.scss
@@ -1,15 +1,17 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-// You can find most of these grid layout values in your design program's layout preferences.
-:root {
-  --wtc-total-width: 1392px;
-  --wtc-number-of-columns: 12;
-  --wtc-gutter-width: 16px;
-  --wtc-row-width: calc(var(--wtc-total-width) + var(--wtc-gutter-width) * 2);
-}
-
-@media #{$md-up} {
+@layer global {
+  // You can find most of these grid layout values in your design program's layout preferences.
   :root {
-    --wtc-gutter-width: 24px;
+    --wtc-total-width: 1392px;
+    --wtc-number-of-columns: 12;
+    --wtc-gutter-width: 16px;
+    --wtc-row-width: calc(var(--wtc-total-width) + var(--wtc-gutter-width) * 2);
+  }
+
+  @media #{$md-up} {
+    :root {
+      --wtc-gutter-width: 24px;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/grid-layout/wrapper/wrapper.module.scss b/packages/wethegit-components/src/components/grid-layout/wrapper/wrapper.module.scss
index 174f6f6b..aa72c36c 100644
--- a/packages/wethegit-components/src/components/grid-layout/wrapper/wrapper.module.scss
+++ b/packages/wethegit-components/src/components/grid-layout/wrapper/wrapper.module.scss
@@ -1,5 +1,7 @@
-.wrapper {
-  inline-size: min(var(--wtc-row-width, 1440px), 100%);
-  margin-inline: auto;
-  padding-inline: calc(var(--wtc-gutter-width, 24px));
+@layer component {
+  .wrapper {
+    inline-size: min(var(--wtc-row-width, 1440px), 100%);
+    margin-inline: auto;
+    padding-inline: calc(var(--wtc-gutter-width, 24px));
+  }
 }
diff --git a/packages/wethegit-components/src/components/icon/icon-defs/icon-defs.module.scss b/packages/wethegit-components/src/components/icon/icon-defs/icon-defs.module.scss
index 836f107e..9df7adb1 100644
--- a/packages/wethegit-components/src/components/icon/icon-defs/icon-defs.module.scss
+++ b/packages/wethegit-components/src/components/icon/icon-defs/icon-defs.module.scss
@@ -1,10 +1,12 @@
-.iconDefs {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+@layer component {
+  .iconDefs {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 }
diff --git a/packages/wethegit-components/src/components/icon/icon/icon.module.scss b/packages/wethegit-components/src/components/icon/icon/icon.module.scss
index 615956fa..bc8ea797 100644
--- a/packages/wethegit-components/src/components/icon/icon/icon.module.scss
+++ b/packages/wethegit-components/src/components/icon/icon/icon.module.scss
@@ -1,19 +1,21 @@
-.icon {
-  --size: 1em;
+@layer component {
+  .icon {
+    --size: 1em;
 
-  aspect-ratio: 1 / 1;
-  display: block;
-  fill: currentcolor;
-  width: var(--size);
-}
+    aspect-ratio: 1 / 1;
+    display: block;
+    fill: currentcolor;
+    width: var(--size);
+  }
 
-.iconDefs {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+  .iconDefs {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 }
diff --git a/packages/wethegit-components/src/components/image-group/components/image-group-item.module.scss b/packages/wethegit-components/src/components/image-group/components/image-group-item.module.scss
index db2e4ad5..b8f98df5 100644
--- a/packages/wethegit-components/src/components/image-group/components/image-group-item.module.scss
+++ b/packages/wethegit-components/src/components/image-group/components/image-group-item.module.scss
@@ -1,14 +1,16 @@
-.item {
-  --left: 0;
-  --top: 0;
-  --width: 0;
+@layer component {
+  .item {
+    --left: 0;
+    --top: 0;
+    --width: 0;
 
-  inline-size: calc(var(--width) / var(--parent-width) * 100%);
-  inset-block-start: calc(var(--top) / var(--parent-height) * 100%);
-  inset-inline-start: calc(var(--left) / var(--parent-width) * 100%);
-  position: absolute;
+    inline-size: calc(var(--width) / var(--parent-width) * 100%);
+    inset-block-start: calc(var(--top) / var(--parent-height) * 100%);
+    inset-inline-start: calc(var(--left) / var(--parent-width) * 100%);
+    position: absolute;
 
-  > * {
-    inline-size: 100%;
+    > * {
+      inline-size: 100%;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/image-group/image-group.module.scss b/packages/wethegit-components/src/components/image-group/image-group.module.scss
index 3001d1f4..dec9fc3b 100644
--- a/packages/wethegit-components/src/components/image-group/image-group.module.scss
+++ b/packages/wethegit-components/src/components/image-group/image-group.module.scss
@@ -1,12 +1,14 @@
-.wrap {
-  --parent-width: 0;
-  --parent-height: 0;
+@layer component {
+  .wrap {
+    --parent-width: 0;
+    --parent-height: 0;
 
-  position: relative;
+    position: relative;
 
-  &::before {
-    content: "";
-    display: block;
-    padding-top: calc(var(--parent-height) / var(--parent-width) * 100%);
+    &::before {
+      content: "";
+      display: block;
+      padding-top: calc(var(--parent-height) / var(--parent-width) * 100%);
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/in-view/components/in-view-item/animation/animation.module.scss b/packages/wethegit-components/src/components/in-view/components/in-view-item/animation/animation.module.scss
index 3d43ddcb..a85fed54 100644
--- a/packages/wethegit-components/src/components/in-view/components/in-view-item/animation/animation.module.scss
+++ b/packages/wethegit-components/src/components/in-view/components/in-view-item/animation/animation.module.scss
@@ -1,15 +1,17 @@
 @use "./animation-presets" as *;
 
-/**
- * Generate CSS modules for each animation preset. These classes contain
- * only the CSS custom properties for each animation preset (--start-x,
- * --end-x, etc.). Classnames generated will match the key within the
- * $animation definition (e.g. "scaleUp").
- */
-@each $preset, $props in $animation {
-  .#{$preset} {
-    @each $prop, $value in $props {
-      --#{$prop}: #{$value};
+@layer component {
+  /**
+   * Generate CSS modules for each animation preset. These classes contain
+   * only the CSS custom properties for each animation preset (--start-x,
+   * --end-x, etc.). Classnames generated will match the key within the
+   * $animation definition (e.g. "scaleUp").
+   */
+  @each $preset, $props in $animation {
+    .#{$preset} {
+      @each $prop, $value in $props {
+        --#{$prop}: #{$value};
+      }
     }
   }
 }
diff --git a/packages/wethegit-components/src/components/in-view/components/in-view-item/styles/in-view-item.module.scss b/packages/wethegit-components/src/components/in-view/components/in-view-item/styles/in-view-item.module.scss
index 1da29c57..d1faa5e2 100644
--- a/packages/wethegit-components/src/components/in-view/components/in-view-item/styles/in-view-item.module.scss
+++ b/packages/wethegit-components/src/components/in-view/components/in-view-item/styles/in-view-item.module.scss
@@ -1,64 +1,66 @@
 @use "./in-view-utilities" as *;
 
-.wrap {
-  @include animation-state-initial;
-}
+@layer component {
+  .wrap {
+    @include animation-state-initial;
+  }
 
-.inView {
-  @include animation-state-final;
-}
+  .inView {
+    @include animation-state-final;
+  }
 
-.staggerChildren {
-  > * {
-    @include animation-state-initial;
+  .staggerChildren {
+    > * {
+      @include animation-state-initial;
 
-    transition-duration: var(--stagger-duration);
+      transition-duration: var(--stagger-duration);
 
-    @for $i from 0 through 20 {
-      &:nth-child(#{$i + 1}) {
-        transition-delay: get-stagger-delay($i);
+      @for $i from 0 through 20 {
+        &:nth-child(#{$i + 1}) {
+          transition-delay: get-stagger-delay($i);
+        }
       }
     }
-  }
 
-  &.inView {
-    > * {
-      @include animation-state-final;
+    &.inView {
+      > * {
+        @include animation-state-final;
+      }
     }
   }
-}
 
-// We are opting to use actual selectors to generate the variations
-// on delays, stagger amounts, durations, etc.; rather than passing
-// the CSS custom properties directly as inline styles. This helps
-// keep our CSS easier to override if needed.
+  // We are opting to use actual selectors to generate the variations
+  // on delays, stagger amounts, durations, etc.; rather than passing
+  // the CSS custom properties directly as inline styles. This helps
+  // keep our CSS easier to override if needed.
 
-// Generate the options for delay, stagger amount, and stagger delay.
-// These range from 0s to 1s, in increments of 0.1s.
-// Example: `.delay2` is a 0.2s delay.
-@for $i from 0 through 10 {
-  .delay#{$i} {
-    --delay: #{get-duration($i)};
-  }
+  // Generate the options for delay, stagger amount, and stagger delay.
+  // These range from 0s to 1s, in increments of 0.1s.
+  // Example: `.delay2` is a 0.2s delay.
+  @for $i from 0 through 10 {
+    .delay#{$i} {
+      --delay: #{get-duration($i)};
+    }
 
-  .staggerAmount#{$i} {
-    --stagger-amount: #{get-duration($i)};
-  }
+    .staggerAmount#{$i} {
+      --stagger-amount: #{get-duration($i)};
+    }
 
-  .staggerDelay#{$i} {
-    --stagger-delay: #{get-duration($i)};
+    .staggerDelay#{$i} {
+      --stagger-delay: #{get-duration($i)};
+    }
   }
-}
 
-// Generate the options for duration and stagger duration.
-// These range from 0s to 2s, in increments of 0.1s.
-// Example: `.duration15` is a 1.5s duration.
-@for $i from 0 through 20 {
-  .duration#{$i} {
-    --duration: #{get-duration($i)};
-  }
+  // Generate the options for duration and stagger duration.
+  // These range from 0s to 2s, in increments of 0.1s.
+  // Example: `.duration15` is a 1.5s duration.
+  @for $i from 0 through 20 {
+    .duration#{$i} {
+      --duration: #{get-duration($i)};
+    }
 
-  .staggerDuration#{$i} {
-    --stagger-duration: #{get-duration($i)};
+    .staggerDuration#{$i} {
+      --stagger-duration: #{get-duration($i)};
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/modal/modal.module.scss b/packages/wethegit-components/src/components/modal/modal.module.scss
index 3234600f..3dce91f4 100644
--- a/packages/wethegit-components/src/components/modal/modal.module.scss
+++ b/packages/wethegit-components/src/components/modal/modal.module.scss
@@ -1,38 +1,40 @@
-.modal {
-  opacity: var(--scale, 0);
-  transition: opacity var(--duration) ease-in-out;
-}
+@layer component {
+  .modal {
+    opacity: var(--scale, 0);
+    transition: opacity var(--duration) ease-in-out;
+  }
 
-.modalOpen {
-  --ease: cubic-bezier(0.77, 0, 0.1, 1.39);
-  --scale: 1;
-}
+  .modalOpen {
+    --ease: cubic-bezier(0.77, 0, 0.1, 1.39);
+    --scale: 1;
+  }
 
-.modalBackdrop {
-  background-color: rgb(0 0 0 / 70%);
-}
+  .modalBackdrop {
+    background-color: rgb(0 0 0 / 70%);
+  }
 
-.modalCloseButton {
-  background-color: yellow;
-  border: none;
-  border-radius: 0.25rem;
-  color: black;
-  cursor: pointer;
-  font-size: 1rem;
-  padding: 0.5em 1em;
-  position: absolute;
-  right: 1em;
-  top: -0.5em;
-}
+  .modalCloseButton {
+    background-color: yellow;
+    border: none;
+    border-radius: 0.25rem;
+    color: black;
+    cursor: pointer;
+    font-size: 1rem;
+    padding: 0.5em 1em;
+    position: absolute;
+    right: 1em;
+    top: -0.5em;
+  }
 
-.modalContent {
-  background-color: white;
-  border-radius: 1rem;
-  box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
-  font-family: sans-serif;
-  max-width: 70%;
-  -webkit-overflow-scrolling: touch;
-  padding: 2rem;
-  transform: scale(var(--scale, 0));
-  transition: transform var(--duration) var(--ease, cubic-bezier(0.75, -0.46, 0.4, 1));
+  .modalContent {
+    background-color: white;
+    border-radius: 1rem;
+    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
+    font-family: sans-serif;
+    max-width: 70%;
+    -webkit-overflow-scrolling: touch;
+    padding: 2rem;
+    transform: scale(var(--scale, 0));
+    transition: transform var(--duration) var(--ease, cubic-bezier(0.75, -0.46, 0.4, 1));
+  }
 }
diff --git a/packages/wethegit-components/src/components/navigation/components/nav-list/nav-list.module.scss b/packages/wethegit-components/src/components/navigation/components/nav-list/nav-list.module.scss
index 65605c0a..7b38c73f 100644
--- a/packages/wethegit-components/src/components/navigation/components/nav-list/nav-list.module.scss
+++ b/packages/wethegit-components/src/components/navigation/components/nav-list/nav-list.module.scss
@@ -1,39 +1,41 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-.navList {
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-}
+@layer component {
+  .navList {
+    flex-direction: column;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
 
-.navListItem {
-  a {
-    color: white;
-    display: inline-block;
-    padding: 10px 20px;
-    text-underline-offset: 2px;
+  .navListItem {
+    a {
+      color: white;
+      display: inline-block;
+      padding: 10px 20px;
+      text-underline-offset: 2px;
 
-    &[aria-current] {
-      color: red;
+      &[aria-current] {
+        color: red;
+      }
     }
   }
-}
 
-@media (hover: hover) {
-  .navListItem {
-    a:hover {
-      color: red;
+  @media (hover: hover) {
+    .navListItem {
+      a:hover {
+        color: red;
+      }
     }
   }
-}
 
-// Feel free to change the breakpoint where the nav goes from hamburger to full
-// Also change the breakpoint in the Toggler and Navigation components
-@media #{$md-up} {
-  .navList {
-    background: black;
-    flex-direction: row;
+  // Feel free to change the breakpoint where the nav goes from hamburger to full
+  // Also change the breakpoint in the Toggler and Navigation components
+  @media #{$md-up} {
+    .navList {
+      background: black;
+      flex-direction: row;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss b/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss
index 59855323..ff7b92c7 100644
--- a/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss
+++ b/packages/wethegit-components/src/components/navigation/components/overlay/overlay.module.scss
@@ -1,15 +1,17 @@
-.overlay {
-  background-color: black;
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  width: 100%;
-}
+@layer component {
+  .overlay {
+    background-color: black;
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
 
-.overlayOpen {
-  opacity: 0.95;
-  pointer-events: auto;
+  .overlayOpen {
+    opacity: 0.95;
+    pointer-events: auto;
+  }
 }
diff --git a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss
index 4e24b869..5c6b8244 100644
--- a/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss
+++ b/packages/wethegit-components/src/components/navigation/components/toggler/toggler.module.scss
@@ -1,62 +1,64 @@
-.toggler {
-  --toggler-size: 40px;
-
-  aspect-ratio: 1 / 1;
-  background-color: black;
-  border-radius: 50%;
-  color: white;
-  display: grid;
-  left: 0;
-  place-content: center;
-  position: fixed;
-  top: 0;
-  width: var(--toggler-size);
-  z-index: 1;
-}
-
-// The icon is a hamburger menu with 3 lines
-.togglerIcon {
-  --line-width: calc(var(--toggler-size) - var(--toggler-size) / 2);
-  --line-height: 3px;
-  --line-space: 2;
-
-  background-color: white;
-  display: block;
-  height: var(--line-height);
-  position: relative;
-  width: var(--line-width);
+@layer component {
+  .toggler {
+    --toggler-size: 40px;
 
-  &::before,
-  &::after {
-    --line-y: calc(var(--line-height) * (var(--line-space) * -1));
-
-    background-color: white;
-    content: "";
-    height: 100%;
+    aspect-ratio: 1 / 1;
+    background-color: black;
+    border-radius: 50%;
+    color: white;
+    display: grid;
     left: 0;
-    position: absolute;
+    place-content: center;
+    position: fixed;
     top: 0;
-    transform: translateY(var(--line-y)) rotate(var(--line-rotation, 0deg));
-    width: 100%;
+    width: var(--toggler-size);
+    z-index: 1;
   }
 
-  &::after {
-    --line-y: calc(var(--line-height) * var(--line-space));
-  }
-}
-
-.togglerPressed {
+  // The icon is a hamburger menu with 3 lines
   .togglerIcon {
-    background-color: transparent;
+    --line-width: calc(var(--toggler-size) - var(--toggler-size) / 2);
+    --line-height: 3px;
+    --line-space: 2;
 
-    &::before {
-      --line-y: 0;
-      --line-rotation: 45deg;
+    background-color: white;
+    display: block;
+    height: var(--line-height);
+    position: relative;
+    width: var(--line-width);
+
+    &::before,
+    &::after {
+      --line-y: calc(var(--line-height) * (var(--line-space) * -1));
+
+      background-color: white;
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transform: translateY(var(--line-y)) rotate(var(--line-rotation, 0deg));
+      width: 100%;
     }
 
     &::after {
-      --line-y: 0;
-      --line-rotation: -45deg;
+      --line-y: calc(var(--line-height) * var(--line-space));
+    }
+  }
+
+  .togglerPressed {
+    .togglerIcon {
+      background-color: transparent;
+
+      &::before {
+        --line-y: 0;
+        --line-rotation: 45deg;
+      }
+
+      &::after {
+        --line-y: 0;
+        --line-rotation: -45deg;
+      }
     }
   }
 }
diff --git a/packages/wethegit-components/src/components/navigation/navigation.module.scss b/packages/wethegit-components/src/components/navigation/navigation.module.scss
index aaf8e42b..5524835d 100644
--- a/packages/wethegit-components/src/components/navigation/navigation.module.scss
+++ b/packages/wethegit-components/src/components/navigation/navigation.module.scss
@@ -1,42 +1,44 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-.mainNav {
-  display: none;
-}
-
-.navBarOpen {
+@layer component {
   .mainNav {
-    display: block;
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
+    display: none;
   }
-}
 
-// Feel free to change the breakpoint where the nav goes from hamburger to full
-// Also change the breakpoint in the NavList component
-@media #{$md-up} {
-  .navBar {
-    left: 0;
-    position: sticky;
-    top: 0;
+  .navBarOpen {
+    .mainNav {
+      display: block;
+      height: 100%;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+    }
   }
 
-  .mainNav {
-    display: block;
-  }
+  // Feel free to change the breakpoint where the nav goes from hamburger to full
+  // Also change the breakpoint in the NavList component
+  @media #{$md-up} {
+    .navBar {
+      left: 0;
+      position: sticky;
+      top: 0;
+    }
 
-  .navBarOpen {
     .mainNav {
-      height: auto;
-      position: relative;
+      display: block;
     }
-  }
 
-  .overlay,
-  .toggler {
-    display: none;
+    .navBarOpen {
+      .mainNav {
+        height: auto;
+        position: relative;
+      }
+    }
+
+    .overlay,
+    .toggler {
+      display: none;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/text/styles/text.scss b/packages/wethegit-components/src/components/text/styles/text.scss
index 81ac6f4b..2434f154 100644
--- a/packages/wethegit-components/src/components/text/styles/text.scss
+++ b/packages/wethegit-components/src/components/text/styles/text.scss
@@ -1,48 +1,50 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-:root {
-  // fonts
-  --wtc-font-family-heading: sans-serif;
-  --wtc-font-family-body: sans-serif;
+@layer global {
+  :root {
+    // fonts
+    --wtc-font-family-heading: sans-serif;
+    --wtc-font-family-body: sans-serif;
 
-  // pixel value equivalent to 1rem — this will rarely change
-  --wtc-base-rem-size: 16;
+    // pixel value equivalent to 1rem — this will rarely change
+    --wtc-base-rem-size: 16;
 
-  // font sizes
-  --wtc-font-size-title-1: 42;
-  --wtc-font-size-title-2: 33;
-  --wtc-font-size-title-3: 26;
-  --wtc-font-size-title-4: 20;
-  --wtc-font-size-title-5: 16;
-  --wtc-font-size-title-6: 13;
-  --wtc-font-size-body: 16;
-  --wtc-font-size-body-smaller: 13;
-  --wtc-font-size-body-larger: 20;
-  --wtc-font-size-body-legal: 10;
+    // font sizes
+    --wtc-font-size-title-1: 42;
+    --wtc-font-size-title-2: 33;
+    --wtc-font-size-title-3: 26;
+    --wtc-font-size-title-4: 20;
+    --wtc-font-size-title-5: 16;
+    --wtc-font-size-title-6: 13;
+    --wtc-font-size-body: 16;
+    --wtc-font-size-body-smaller: 13;
+    --wtc-font-size-body-larger: 20;
+    --wtc-font-size-body-legal: 10;
 
-  // line heights
-  --wtc-line-height-heading: 1.2;
-  --wtc-line-height-body: 1.4;
+    // line heights
+    --wtc-line-height-heading: 1.2;
+    --wtc-line-height-body: 1.4;
 
-  // font weights
-  --wtc-font-weight-light: 300;
-  --wtc-font-weight-regular: 400;
-  --wtc-font-weight-medium: 500;
-  --wtc-font-weight-semibold: 600;
-  --wtc-font-weight-bold: 700;
-  --wtc-font-weight-black: 900;
-}
+    // font weights
+    --wtc-font-weight-light: 300;
+    --wtc-font-weight-regular: 400;
+    --wtc-font-weight-medium: 500;
+    --wtc-font-weight-semibold: 600;
+    --wtc-font-weight-bold: 700;
+    --wtc-font-weight-black: 900;
+  }
 
-@media #{$md-up} {
-  :root {
-    --wtc-font-size-title-1: 52;
-    --wtc-font-size-title-2: 41;
-    --wtc-font-size-title-3: 32;
-    --wtc-font-size-title-4: 25;
-    --wtc-font-size-title-5: 20;
-    --wtc-font-size-title-6: 16;
-    --wtc-font-size-body: 20;
-    --wtc-font-size-body-smaller: 16;
-    --wtc-font-size-body-larger: 25;
+  @media #{$md-up} {
+    :root {
+      --wtc-font-size-title-1: 52;
+      --wtc-font-size-title-2: 41;
+      --wtc-font-size-title-3: 32;
+      --wtc-font-size-title-4: 25;
+      --wtc-font-size-title-5: 20;
+      --wtc-font-size-title-6: 16;
+      --wtc-font-size-body: 20;
+      --wtc-font-size-body-smaller: 16;
+      --wtc-font-size-body-larger: 25;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/components/text/text.module.scss b/packages/wethegit-components/src/components/text/text.module.scss
index c4fcb044..580dfd1c 100644
--- a/packages/wethegit-components/src/components/text/text.module.scss
+++ b/packages/wethegit-components/src/components/text/text.module.scss
@@ -1,86 +1,89 @@
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 @use "./styles/text-utilities" as *;
 
-$alignments: start, center, end, justify;
-$variants: "title-1", "title-2", "title-3", "title-4", "title-5", "title-6", "body",
-  "body-smaller", "body-larger", "body-legal";
-$weights: "light", "regular", "medium", "semibold", "bold", "black";
-$wraps: wrap, nowrap, balance, pretty;
-
-@mixin alignment-classnames($prefix: "") {
-  @each $a in $alignments {
-    .align#{$prefix}-#{$a} {
-      text-align: $a;
+@layer component {
+  $alignments: start, center, end, justify;
+  $variants:
+    "title-1", "title-2", "title-3", "title-4", "title-5", "title-6", "body",
+    "body-smaller", "body-larger", "body-legal";
+  $weights: "light", "regular", "medium", "semibold", "bold", "black";
+  $wraps: wrap, nowrap, balance, pretty;
+
+  @mixin alignment-classnames($prefix: "") {
+    @each $a in $alignments {
+      .align#{$prefix}-#{$a} {
+        text-align: $a;
+      }
     }
   }
-}
 
-.text {
-  margin: 0;
-  text-wrap: pretty;
-}
+  .text {
+    margin: 0;
+    text-wrap: pretty;
+  }
 
-.textHeading {
-  font-family: var(--wtc-font-family-heading);
+  .textHeading {
+    font-family: var(--wtc-font-family-heading);
 
-  // This default font weight can be overwritten by the `weight` prop.
-  font-weight: var(--wtc-font-weight-bold);
-  line-height: var(--wtc-line-height-heading);
-}
+    // This default font weight can be overwritten by the `weight` prop.
+    font-weight: var(--wtc-font-weight-bold);
+    line-height: var(--wtc-line-height-heading);
+  }
 
-.textBody {
-  font-family: var(--wtc-font-family-body);
+  .textBody {
+    font-family: var(--wtc-font-family-body);
 
-  // This default font weight can be overwritten by the `weight` prop.
-  font-weight: var(--wtc-font-weight-regular);
-  line-height: var(--wtc-line-height-body);
-}
+    // This default font weight can be overwritten by the `weight` prop.
+    font-weight: var(--wtc-font-weight-regular);
+    line-height: var(--wtc-line-height-body);
+  }
 
-.noWrap {
-  white-space: nowrap;
-}
+  .noWrap {
+    white-space: nowrap;
+  }
 
-.wrapNormal {
-  text-wrap: wrap;
-}
+  .wrapNormal {
+    text-wrap: wrap;
+  }
 
-.wrapBalance {
-  text-wrap: balance;
-}
+  .wrapBalance {
+    text-wrap: balance;
+  }
 
-@each $v in $variants {
-  .variant-#{$v} {
-    font-size: calc-rem-css-var(--wtc-font-size-#{$v});
+  @each $v in $variants {
+    .variant-#{$v} {
+      font-size: calc-rem-css-var(--wtc-font-size-#{$v});
+    }
   }
-}
 
-@each $w in $weights {
-  .weight-#{$w} {
-    font-weight: var(--wtc-font-weight-#{$w});
+  @each $w in $weights {
+    .weight-#{$w} {
+      font-weight: var(--wtc-font-weight-#{$w});
+    }
   }
-}
 
-@each $wrap in $wraps {
-  .wrap-#{$wrap} {
-    text-wrap: $wrap;
+  @each $wrap in $wraps {
+    .wrap-#{$wrap} {
+      text-wrap: $wrap;
+    }
   }
-}
 
-@include alignment-classnames;
-@include alignment-classnames(-sm);
+  @include alignment-classnames;
+  @include alignment-classnames(-sm);
 
-@media #{$md-up} {
-  @include alignment-classnames(-md);
-}
+  @media #{$md-up} {
+    @include alignment-classnames(-md);
+  }
 
-@media #{$lg-up} {
-  @include alignment-classnames(-lg);
-}
+  @media #{$lg-up} {
+    @include alignment-classnames(-lg);
+  }
 
-@media #{$xl-up} {
-  @include alignment-classnames(-xl);
-}
+  @media #{$xl-up} {
+    @include alignment-classnames(-xl);
+  }
 
-@media #{$xxl-up} {
-  @include alignment-classnames(-xxl);
+  @media #{$xxl-up} {
+    @include alignment-classnames(-xxl);
+  }
 }
diff --git a/packages/wethegit-components/src/components/visually-hidden-links/visually-hidden-links.module.scss b/packages/wethegit-components/src/components/visually-hidden-links/visually-hidden-links.module.scss
index 3b62ebc2..993949d7 100644
--- a/packages/wethegit-components/src/components/visually-hidden-links/visually-hidden-links.module.scss
+++ b/packages/wethegit-components/src/components/visually-hidden-links/visually-hidden-links.module.scss
@@ -1,6 +1,8 @@
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0 16px;
-  text-align: center;
+@layer component {
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0 16px;
+    text-align: center;
+  }
 }
diff --git a/packages/wethegit-components/src/components/visually-hidden/visually-hidden.module.scss b/packages/wethegit-components/src/components/visually-hidden/visually-hidden.module.scss
index c814cc07..566c1864 100644
--- a/packages/wethegit-components/src/components/visually-hidden/visually-hidden.module.scss
+++ b/packages/wethegit-components/src/components/visually-hidden/visually-hidden.module.scss
@@ -1,17 +1,19 @@
-%visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+@layer component {
+  %visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 
-.standard {
-  @extend %visually-hidden;
-}
+  .standard {
+    @extend %visually-hidden;
+  }
 
-.revealOnFocus:not(:focus, :active) {
-  @extend %visually-hidden;
+  .revealOnFocus:not(:focus, :active) {
+    @extend %visually-hidden;
+  }
 }
diff --git a/packages/wethegit-components/src/styles/animation/animation.scss b/packages/wethegit-components/src/styles/animation/animation.scss
index de5e34e1..e37c5b37 100644
--- a/packages/wethegit-components/src/styles/animation/animation.scss
+++ b/packages/wethegit-components/src/styles/animation/animation.scss
@@ -1,18 +1,20 @@
-:root {
-  // Multiplier for animation durations; Set to zero to remove animations.
-  --duration-factor: 1;
+@layer global {
+  :root {
+    // Multiplier for animation durations; Set to zero to remove animations.
+    --duration-factor: 1;
 
-  // Ease curves; just a bit nicer than what browsers give us out-of-the-box.
-  --ease-in: cubic-bezier(0.51, 0, 0.9, 0.43);
-  --ease-back-in: cubic-bezier(0.38, -0.37, 0.83, 0.23);
-  --ease-out: cubic-bezier(0.35, 0.91, 0.3, 0.99);
-  --ease-back-out: cubic-bezier(0.21, 0.12, 0.35, 1.43);
-  --ease-in-out: cubic-bezier(0.75, 0, 0.21, 0.99);
-  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-}
+    // Ease curves; just a bit nicer than what browsers give us out-of-the-box.
+    --ease-in: cubic-bezier(0.51, 0, 0.9, 0.43);
+    --ease-back-in: cubic-bezier(0.38, -0.37, 0.83, 0.23);
+    --ease-out: cubic-bezier(0.35, 0.91, 0.3, 0.99);
+    --ease-back-out: cubic-bezier(0.21, 0.12, 0.35, 1.43);
+    --ease-in-out: cubic-bezier(0.75, 0, 0.21, 0.99);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration-factor: 0;
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --duration-factor: 0;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/styles/global.scss b/packages/wethegit-components/src/styles/global.scss
index b2b0c758..4b3fc51d 100644
--- a/packages/wethegit-components/src/styles/global.scss
+++ b/packages/wethegit-components/src/styles/global.scss
@@ -1,2 +1,3 @@
 @use "./reset";
 @use "./animation/animation";
+@layer reset, global, utility, component;
diff --git a/packages/wethegit-components/src/styles/reset.scss b/packages/wethegit-components/src/styles/reset.scss
index afc055e8..3226a5f5 100644
--- a/packages/wethegit-components/src/styles/reset.scss
+++ b/packages/wethegit-components/src/styles/reset.scss
@@ -1,90 +1,92 @@
-/* Box sizing rules */
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
+@layer reset {
+  /* Box sizing rules */
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+  }
 
-/* Remove default margin */
-body,
-h1,
-h2,
-h3,
-h4,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin-block-end: 0;
-}
+  /* Remove default margin */
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin-block-end: 0;
+  }
 
-/* Set core body defaults */
-body {
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.5;
-  min-height: 100vh;
-  text-rendering: optimizespeed;
-}
+  /* Set core body defaults */
+  body {
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+    min-height: 100vh;
+    text-rendering: optimizespeed;
+  }
 
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
+  /* A elements that don't have a class get default styles */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
 
-/* Make images easier to work with */
-img,
-picture {
-  border-style: none;
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
+  /* Make images easier to work with */
+  img,
+  picture {
+    border-style: none;
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
 
-figure {
-  margin: 0;
-}
+  figure {
+    margin: 0;
+  }
 
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
 
-button {
-  appearance: none;
-  background: none;
-  border: none;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-}
+  button {
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0;
+  }
 
-/* Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  overflow-wrap: break-word;
-}
+  /* Avoid text overflows */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
 
-/* Create a root stacking context */
-#root,
-/* stylelint-disable-next-line selector-id-pattern */
-#__next {
-  isolation: isolate;
-}
+  /* Create a root stacking context */
+  #root,
+  /* stylelint-disable-next-line selector-id-pattern */
+  #__next {
+    isolation: isolate;
+  }
 
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
+  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/utilities/color/color.module.scss b/packages/wethegit-components/src/utilities/color/color.module.scss
index 0e64457b..e23ea382 100644
--- a/packages/wethegit-components/src/utilities/color/color.module.scss
+++ b/packages/wethegit-components/src/utilities/color/color.module.scss
@@ -1,13 +1,15 @@
 @use "./styles/color-utilities" as *;
 @use "./styles/color-variables" as *;
 
-// define utility classes:
-@each $color, $h in $colors {
-  .bg-#{$color} {
-    background-color: $h;
-  }
+@layer utility {
+  // define utility classes:
+  @each $color, $h in $colors {
+    .bg-#{$color} {
+      background-color: $h;
+    }
 
-  .text-#{$color} {
-    color: $h;
+    .text-#{$color} {
+      color: $h;
+    }
   }
 }
diff --git a/packages/wethegit-components/src/utilities/spacing/spacing.module.scss b/packages/wethegit-components/src/utilities/spacing/spacing.module.scss
index 32c8cb52..abb29b60 100644
--- a/packages/wethegit-components/src/utilities/spacing/spacing.module.scss
+++ b/packages/wethegit-components/src/utilities/spacing/spacing.module.scss
@@ -2,108 +2,110 @@
 @use "./styles/spacing-utilities" as *;
 @use "./styles/spacing-variables" as *;
 
-$total-space-classes: 10;
+@layer utility {
+  $total-space-classes: 10;
 
-/**
-  * Utility classes for margin and padding.
-  * Classes are generated for each size based on the $base-space variable.
-  *
-  * Format for class names is:
-  * {margin/padding}-{x/y/top/right/bottom/left[optional]}{-breakpoint[optional]}-{size}
-  *
-  * Examples:
-  * margin-0, padding-x-2, margin-x-auto, margin-bottom-md-3, padding-x-lg-4
-  *
-  * @param {Number} $total - The total number of classes to generate (0 through $total). Sizes are based on the $base-space property.
-  * @param {String} $suffix - An optional suffix to append to the class name.
-  */
-@mixin generate-spacer-classes($total, $suffix: "") {
-  @for $i from 0 through $total {
-    $directions: "left-", "right-", "top-", "bottom-", "x-", "y-", "";
-    $props: "margin", "padding";
+  /**
+    * Utility classes for margin and padding.
+    * Classes are generated for each size based on the $base-space variable.
+    *
+    * Format for class names is:
+    * {margin/padding}-{x/y/top/right/bottom/left[optional]}{-breakpoint[optional]}-{size}
+    *
+    * Examples:
+    * margin-0, padding-x-2, margin-x-auto, margin-bottom-md-3, padding-x-lg-4
+    *
+    * @param {Number} $total - The total number of classes to generate (0 through $total). Sizes are based on the $base-space property.
+    * @param {String} $suffix - An optional suffix to append to the class name.
+    */
+  @mixin generate-spacer-classes($total, $suffix: "") {
+    @for $i from 0 through $total {
+      $directions: "left-", "right-", "top-", "bottom-", "x-", "y-", "";
+      $props: "margin", "padding";
 
-    @each $prop in $props {
-      @each $dir in $directions {
-        .#{$prop}-#{$dir}#{$suffix}#{$i} {
-          @if $dir == "left-" {
-            #{$prop}-inline-start: space-by($i);
-          } @else if $dir == "right-" {
-            #{$prop}-inline-end: space-by($i);
-          } @else if $dir == "top-" {
-            #{$prop}-block-start: space-by($i);
-          } @else if $dir == "bottom-" {
-            #{$prop}-block-end: space-by($i);
-          } @else if $dir == "x-" {
-            #{$prop}-inline: space-by($i);
-          } @else if $dir == "y-" {
-            #{$prop}-block: space-by($i);
-          } @else if $dir == "" {
-            #{$prop}: space-by($i);
+      @each $prop in $props {
+        @each $dir in $directions {
+          .#{$prop}-#{$dir}#{$suffix}#{$i} {
+            @if $dir == "left-" {
+              #{$prop}-inline-start: space-by($i);
+            } @else if $dir == "right-" {
+              #{$prop}-inline-end: space-by($i);
+            } @else if $dir == "top-" {
+              #{$prop}-block-start: space-by($i);
+            } @else if $dir == "bottom-" {
+              #{$prop}-block-end: space-by($i);
+            } @else if $dir == "x-" {
+              #{$prop}-inline: space-by($i);
+            } @else if $dir == "y-" {
+              #{$prop}-block: space-by($i);
+            } @else if $dir == "" {
+              #{$prop}: space-by($i);
+            }
           }
         }
       }
     }
-  }
 
-  $directions: "left-", "right-", "x-";
+    $directions: "left-", "right-", "x-";
 
-  @each $dir in $directions {
-    .margin-#{$dir}#{$suffix}auto {
-      @if $dir == "left-" {
-        margin-inline-start: auto;
-      } @else if $dir == "right-" {
-        margin-inline-end: auto;
-      } @else if $dir == "x-" {
-        margin-inline: auto;
+    @each $dir in $directions {
+      .margin-#{$dir}#{$suffix}auto {
+        @if $dir == "left-" {
+          margin-inline-start: auto;
+        } @else if $dir == "right-" {
+          margin-inline-end: auto;
+        } @else if $dir == "x-" {
+          margin-inline: auto;
+        }
       }
     }
   }
-}
 
-/**
-  * Generates the vertical (block) child-spacing class names.
-  * Classes are generated for each size based on the $base-space variable.
-  *
-  * Format for class names is:
-  * {child-spacing}{-breakpoint[optional]}-{size}
-  *
-  * Examples:
-  * child-spacing-1, child-spacing-md-4, child-spacing-lg-6
-  *
-  * @param {Number} $total - The total number of classes to generate (0 through $total). Sizes are based on the $base-space property.
-  * @param {String} $suffix - An optional suffix to append to the class name.
-  */
-@mixin generate-child-spacing-classes($total, $suffix: "") {
-  @for $i from 0 through $total {
-    $base-classname: "child-spacing";
+  /**
+    * Generates the vertical (block) child-spacing class names.
+    * Classes are generated for each size based on the $base-space variable.
+    *
+    * Format for class names is:
+    * {child-spacing}{-breakpoint[optional]}-{size}
+    *
+    * Examples:
+    * child-spacing-1, child-spacing-md-4, child-spacing-lg-6
+    *
+    * @param {Number} $total - The total number of classes to generate (0 through $total). Sizes are based on the $base-space property.
+    * @param {String} $suffix - An optional suffix to append to the class name.
+    */
+  @mixin generate-child-spacing-classes($total, $suffix: "") {
+    @for $i from 0 through $total {
+      $base-classname: "child-spacing";
 
-    .#{$base-classname}-#{$suffix}#{$i} {
-      > * + * {
-        margin-block-start: space-by($i);
+      .#{$base-classname}-#{$suffix}#{$i} {
+        > * + * {
+          margin-block-start: space-by($i);
+        }
       }
     }
   }
-}
 
-@include generate-spacer-classes($total-space-classes);
-@include generate-child-spacing-classes($total-space-classes);
+  @include generate-spacer-classes($total-space-classes);
+  @include generate-child-spacing-classes($total-space-classes);
 
-@media #{$md-up} {
-  @include generate-spacer-classes($total-space-classes, "md-");
-  @include generate-child-spacing-classes($total-space-classes, "md-");
-}
+  @media #{$md-up} {
+    @include generate-spacer-classes($total-space-classes, "md-");
+    @include generate-child-spacing-classes($total-space-classes, "md-");
+  }
 
-@media #{$lg-up} {
-  @include generate-spacer-classes($total-space-classes, "lg-");
-  @include generate-child-spacing-classes($total-space-classes, "lg-");
-}
+  @media #{$lg-up} {
+    @include generate-spacer-classes($total-space-classes, "lg-");
+    @include generate-child-spacing-classes($total-space-classes, "lg-");
+  }
 
-@media #{$xl-up} {
-  @include generate-spacer-classes($total-space-classes, "xl-");
-  @include generate-child-spacing-classes($total-space-classes, "xl-");
-}
+  @media #{$xl-up} {
+    @include generate-spacer-classes($total-space-classes, "xl-");
+    @include generate-child-spacing-classes($total-space-classes, "xl-");
+  }
 
-@media #{$xxl-up} {
-  @include generate-spacer-classes($total-space-classes, "xxl-");
-  @include generate-child-spacing-classes($total-space-classes, "xxl-");
+  @media #{$xxl-up} {
+    @include generate-spacer-classes($total-space-classes, "xxl-");
+    @include generate-child-spacing-classes($total-space-classes, "xxl-");
+  }
 }
diff --git a/packages/wethegit-components/src/utilities/visibility/visibility.module.scss b/packages/wethegit-components/src/utilities/visibility/visibility.module.scss
index c8082af2..5e5b0e8b 100644
--- a/packages/wethegit-components/src/utilities/visibility/visibility.module.scss
+++ b/packages/wethegit-components/src/utilities/visibility/visibility.module.scss
@@ -3,56 +3,58 @@
 @use "sass:map";
 @use "@local/styles/breakpoints/breakpoints-variables" as *;
 
-.md-only,
-.md-up,
-.lg-only,
-.lg-up,
-.xl-only,
-.xl-up,
-.xxl-only,
-.xxl-up {
-  display: none;
-}
-
-@media #{$md-up} {
-  .sm-only {
+@layer utility {
+  .md-only,
+  .md-up,
+  .lg-only,
+  .lg-up,
+  .xl-only,
+  .xl-up,
+  .xxl-only,
+  .xxl-up {
     display: none;
   }
 
-  .md-only,
-  .md-up {
-    display: block;
-  }
-}
+  @media #{$md-up} {
+    .sm-only {
+      display: none;
+    }
 
-@media #{$lg-up} {
-  .md-only {
-    display: none;
+    .md-only,
+    .md-up {
+      display: block;
+    }
   }
 
-  .lg-only,
-  .lg-up {
-    display: block;
-  }
-}
+  @media #{$lg-up} {
+    .md-only {
+      display: none;
+    }
 
-@media #{$xl-up} {
-  .lg-only {
-    display: none;
+    .lg-only,
+    .lg-up {
+      display: block;
+    }
   }
 
-  .xl-only,
-  .xl-up {
-    display: block;
-  }
-}
+  @media #{$xl-up} {
+    .lg-only {
+      display: none;
+    }
 
-@media #{$xxl-up} {
-  .xl-only {
-    display: none;
+    .xl-only,
+    .xl-up {
+      display: block;
+    }
   }
 
-  .xxl-up {
-    display: block;
+  @media #{$xxl-up} {
+    .xl-only {
+      display: none;
+    }
+
+    .xxl-up {
+      display: block;
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 83584ab6..40e09cca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3947,11 +3947,6 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
-
 electron-to-chromium@^1.5.249:
   version "1.5.255"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.255.tgz#fe9294ce172241eb50733bc00f2bd00d9c1e4ec7"
@@ -3962,21 +3957,11 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
-emoji-regex@^10.2.1, emoji-regex@^10.3.0:
-  version "10.6.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.6.0.tgz#bf3d6e8f7f8fd22a65d9703475bc0147357a6b0d"
-  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-regex@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
-
 enquirer@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
@@ -4944,7 +4929,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1:
+get-east-asian-width@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz#9bc4caa131702b4b61729cb7e42735bc550c9ee6"
   integrity sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
@@ -8808,7 +8793,7 @@ string-length@^5.0.1:
     char-regex "^2.0.0"
     strip-ansi "^7.0.1"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8817,32 +8802,14 @@ string-length@^5.0.1:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.1, string-width@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
-
-string-width@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-6.1.0.tgz#96488d6ed23f9ad5d82d13522af9e4c4c3fd7518"
-  integrity sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==
-  dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^10.2.1"
-    strip-ansi "^7.0.1"
-
-string-width@^7.0.0, string-width@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.2.0.tgz#b5bb8e2165ce275d4d43476dd2700ad9091db6dc"
-  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.1, string-width@^5.1.2, string-width@^6.0.0, string-width@^7.0.0, string-width@^7.2.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
-    emoji-regex "^10.3.0"
-    get-east-asian-width "^1.0.0"
-    strip-ansi "^7.1.0"
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
 
 string.prototype.matchall@^4.0.12:
   version "4.0.12"
@@ -8918,7 +8885,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -9904,8 +9878,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9923,6 +9896,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"