diff --git a/client/branded/src/global-styles/breakpoints.scss b/client/branded/src/global-styles/breakpoints.scss
deleted file mode 100644
index 3636e84583c..00000000000
--- a/client/branded/src/global-styles/breakpoints.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// To use breakpoints mixins in CSS modules import this file via:
-// @import 'branded/src/global-styles/breakpoints';
-
-// `$grid-breakpoints` is copied from `~bootstrap/scss/variables` because we cannot import a single variable from SCSS file
-// and we don't want to expose all Bootstrap SCSS variables ('bootstrap/scss/variables') to our CSS modules.
-// If possible, prefer CSS variables to SCSS variables.
-$grid-breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-    lg: 992px,
-    xl: 1200px,
-);
-
-@import 'bootstrap/scss/mixins/breakpoints';
diff --git a/client/branded/src/global-styles/index.scss b/client/branded/src/global-styles/index.scss
index 68fb88c0012..0915c5ee1bf 100644
--- a/client/branded/src/global-styles/index.scss
+++ b/client/branded/src/global-styles/index.scss
@@ -117,8 +117,6 @@ $hr-margin-y: 0.25rem;
 // Disable transitions
 $input-transition: none;
 
-// './breakpoints' defines $grid-breakpoints for global CSS and exposes breakpoints mixins to CSS modules
-@import './breakpoints';
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
@@ -128,7 +126,8 @@ $input-transition: none;
 @import 'bootstrap/scss/progress';
 @import 'bootstrap/scss/tooltip';
 @import 'bootstrap/scss/transitions';
-@import '../../../shared/src/global-styles/icons';
+@import 'wildcard/src/global-styles/breakpoints';
+@import 'shared/src/global-styles/icons';
 @import './background';
 @import './badge';
 @import './card';
diff --git a/client/web/src/enterprise/batches/close/BatchChangeCloseChangesetsList.module.scss b/client/web/src/enterprise/batches/close/BatchChangeCloseChangesetsList.module.scss
index 444ed8645e5..b2331fd2e33 100644
--- a/client/web/src/enterprise/batches/close/BatchChangeCloseChangesetsList.module.scss
+++ b/client/web/src/enterprise/batches/close/BatchChangeCloseChangesetsList.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-close-changesets-list {
     &__grid {
@@ -7,7 +7,7 @@
         row-gap: 1rem;
         column-gap: 1rem;
         align-items: center;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             row-gap: 0.5rem;
             column-gap: 0.5rem;
         }
diff --git a/client/web/src/enterprise/batches/close/ChangesetCloseNode.module.scss b/client/web/src/enterprise/batches/close/ChangesetCloseNode.module.scss
index cfb1b3ff3c3..f9de11cefe6 100644
--- a/client/web/src/enterprise/batches/close/ChangesetCloseNode.module.scss
+++ b/client/web/src/enterprise/batches/close/ChangesetCloseNode.module.scss
@@ -1,11 +1,11 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .changeset-close-node {
     &__separator {
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
diff --git a/client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.module.scss b/client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.module.scss
index f238e9f3210..ec7a557bd58 100644
--- a/client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.module.scss
+++ b/client/web/src/enterprise/batches/close/CloseChangesetsListEmptyElement.module.scss
@@ -1,8 +1,8 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .close-changesets-list-empty-element {
     &__body {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             padding: 0 !important;
             padding-top: 0.5rem !important;
         }
diff --git a/client/web/src/enterprise/batches/close/ExternalChangesetCloseNode.module.scss b/client/web/src/enterprise/batches/close/ExternalChangesetCloseNode.module.scss
index 0cb4c08f33e..9ee892d3510 100644
--- a/client/web/src/enterprise/batches/close/ExternalChangesetCloseNode.module.scss
+++ b/client/web/src/enterprise/batches/close/ExternalChangesetCloseNode.module.scss
@@ -1,33 +1,33 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .external-changeset-close-node {
     &__statuses {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Use up remaining width of the row.
             grid-column: 1 / -1;
         }
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Use up remaining width of the row.
             grid-column: 2 / -1;
         }
     }
 
     &__show-details {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
     }
 
     &__information {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Use up remaining width of the row.
             grid-column: 3 / -1;
         }
     }
     &__action,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
diff --git a/client/web/src/enterprise/batches/close/HiddenExternalChangesetCloseNode.module.scss b/client/web/src/enterprise/batches/close/HiddenExternalChangesetCloseNode.module.scss
index b3ea851c7e0..9ca201375ef 100644
--- a/client/web/src/enterprise/batches/close/HiddenExternalChangesetCloseNode.module.scss
+++ b/client/web/src/enterprise/batches/close/HiddenExternalChangesetCloseNode.module.scss
@@ -1,9 +1,9 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .hidden-external-changeset-close-node {
     &__action,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
diff --git a/client/web/src/enterprise/batches/detail/BatchChangeBurndownChart.module.scss b/client/web/src/enterprise/batches/detail/BatchChangeBurndownChart.module.scss
index 4a1431d13a5..685b227e1fc 100644
--- a/client/web/src/enterprise/batches/detail/BatchChangeBurndownChart.module.scss
+++ b/client/web/src/enterprise/batches/detail/BatchChangeBurndownChart.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-burndown-chart {
     &-legend {
@@ -14,7 +14,7 @@
         }
     }
     &__container {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             flex-direction: column-reverse;
             align-items: flex-start !important;
         }
diff --git a/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.module.scss b/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.module.scss
index 8829e8fa5aa..8e6b0ffbc65 100644
--- a/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.module.scss
+++ b/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-stats-card {
     &__changesets-pill {
@@ -7,14 +7,14 @@
         height: 24px;
     }
     &__completeness {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Emulate h4 size on xs devices.
             font-size: 0.875rem;
             line-height: (20/14);
         }
     }
     &__state-badge {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Emulate h4 on sm and xs devices.
             font-size: 0.875rem;
             line-height: (20/14);
@@ -22,20 +22,20 @@
         }
     }
     &__diff-stat {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             margin-top: 1rem;
             flex-basis: 100%;
         }
     }
     &__stat {
         min-width: 0;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             flex-basis: 33%;
             padding-top: 1rem;
             padding-left: 0.5rem;
             padding-right: 0.5rem;
         }
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             flex-basis: 49.9%;
             padding-left: 0.5rem;
             padding-right: 0.5rem;
diff --git a/client/web/src/enterprise/batches/detail/BatchSpecTab.module.scss b/client/web/src/enterprise/batches/detail/BatchSpecTab.module.scss
index 99cf634698b..a2d4758ccba 100644
--- a/client/web/src/enterprise/batches/detail/BatchSpecTab.module.scss
+++ b/client/web/src/enterprise/batches/detail/BatchSpecTab.module.scss
@@ -1,8 +1,8 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-spec-tab {
     &__header-col {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             flex-basis: 100%;
         }
     }
diff --git a/client/web/src/enterprise/batches/detail/changesets/ChangesetNode.module.scss b/client/web/src/enterprise/batches/detail/changesets/ChangesetNode.module.scss
index c77b478d501..66e77f00d38 100644
--- a/client/web/src/enterprise/batches/detail/changesets/ChangesetNode.module.scss
+++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetNode.module.scss
@@ -1,11 +1,11 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .changeset-node {
     &__separator {
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
diff --git a/client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.module.scss b/client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.module.scss
index 74ff14a3f28..2bc27f62038 100644
--- a/client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.module.scss
+++ b/client/web/src/enterprise/batches/detail/changesets/EmptyChangesetListElement.module.scss
@@ -1,8 +1,8 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .empty-changeset-list-element {
     &__body {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             padding: 0 !important;
             padding-top: 0.5rem !important;
         }
diff --git a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.module.scss b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.module.scss
index 055d5f0dca9..83f2c0907aa 100644
--- a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.module.scss
+++ b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetNode.module.scss
@@ -1,12 +1,12 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .external-changeset-node {
     &__statuses {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Use up remaining width of the row.
             grid-column: 1 / -1;
         }
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Use up remaining width of the row.
             grid-column: 2 / -1;
         }
@@ -17,18 +17,18 @@
     &__expanded-section {
         // Make it full width in the current row.
         grid-column: 2 / -1;
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
     &__state,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
     &__show-details {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
diff --git a/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.module.scss b/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.module.scss
index dc2d9dee704..87bf17d8bb0 100644
--- a/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.module.scss
+++ b/client/web/src/enterprise/batches/detail/changesets/HiddenExternalChangesetNode.module.scss
@@ -1,14 +1,14 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .hidden-external-changeset-node {
     &__information {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             grid-column: 3 / -1;
         }
     }
     &__status,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
diff --git a/client/web/src/enterprise/batches/list/BatchChangeListPage.module.scss b/client/web/src/enterprise/batches/list/BatchChangeListPage.module.scss
index 0fb57f6ca95..9d7c4b69bc5 100644
--- a/client/web/src/enterprise/batches/list/BatchChangeListPage.module.scss
+++ b/client/web/src/enterprise/batches/list/BatchChangeListPage.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-list-page {
     &__grid {
@@ -7,11 +7,11 @@
         row-gap: 1rem;
         column-gap: 1.5rem;
         align-items: center;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Reduce gap on sm and xs screens.
             column-gap: 1rem;
         }
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Reduce gap on xs screens.
             row-gap: 0.5rem;
         }
diff --git a/client/web/src/enterprise/batches/list/BatchChangeNode.module.scss b/client/web/src/enterprise/batches/list/BatchChangeNode.module.scss
index b81e895249f..3c6825a3e9f 100644
--- a/client/web/src/enterprise/batches/list/BatchChangeNode.module.scss
+++ b/client/web/src/enterprise/batches/list/BatchChangeNode.module.scss
@@ -1,16 +1,16 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-node {
     &__badge {
         width: 100%;
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             width: fit-content;
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
     }
     &__title {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             // Emulate h4 on sm and xs devices.
             font-size: 0.875rem;
             line-height: (20/14);
@@ -18,7 +18,7 @@
         }
     }
     &__content {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             width: fit-content;
             // Make it full width in the current row.
             grid-column: 1 / -1;
@@ -29,7 +29,7 @@
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
diff --git a/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.module.scss b/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.module.scss
index 644a3237e9d..5dbe41bfb75 100644
--- a/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.module.scss
+++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .batch-change-preview-stats-bar {
     &__stat {
@@ -15,25 +15,25 @@
         margin-left: calc(20% / 2);
     }
     &__diff {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             flex-grow: 1;
         }
     }
     &__metrics {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             flex-grow: 1;
             justify-content: space-between !important;
         }
     }
     &__states {
-        @include media-breakpoint-down(md) {
+        @media (--md-breakpoint-down) {
             flex-grow: 1;
             justify-content: space-between !important;
             flex-wrap: wrap;
         }
     }
     &__state {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-bottom: 1rem !important;
         }
     }
diff --git a/client/web/src/enterprise/batches/preview/CreateUpdateBatchChangeAlert.module.scss b/client/web/src/enterprise/batches/preview/CreateUpdateBatchChangeAlert.module.scss
index 4489062fcb0..85416118846 100644
--- a/client/web/src/enterprise/batches/preview/CreateUpdateBatchChangeAlert.module.scss
+++ b/client/web/src/enterprise/batches/preview/CreateUpdateBatchChangeAlert.module.scss
@@ -1,6 +1,6 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
-@include media-breakpoint-down(sm) {
+@media (--sm-breakpoint-down) {
     .create-update-batch-change-alert {
         &__badge,
         &__copy {
diff --git a/client/web/src/enterprise/batches/preview/list/ChangesetApplyPreviewNode.module.scss b/client/web/src/enterprise/batches/preview/list/ChangesetApplyPreviewNode.module.scss
index fa6ecf68e70..62b38e326c6 100644
--- a/client/web/src/enterprise/batches/preview/list/ChangesetApplyPreviewNode.module.scss
+++ b/client/web/src/enterprise/batches/preview/list/ChangesetApplyPreviewNode.module.scss
@@ -1,11 +1,11 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .changeset-apply-preview-node {
     &__separator {
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
diff --git a/client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.module.scss b/client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.module.scss
index e70e888816e..0f0c0ce46e3 100644
--- a/client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.module.scss
+++ b/client/web/src/enterprise/batches/preview/list/EmptyPreviewListElement.module.scss
@@ -1,8 +1,8 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .empty-preview-list-element {
     &__body {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             padding: 0 !important;
             padding-top: 0.5rem !important;
         }
diff --git a/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.module.scss b/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.module.scss
index a2f27646c57..ee0fbf57a5c 100644
--- a/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.module.scss
+++ b/client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.module.scss
@@ -1,11 +1,11 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .hidden-changeset-apply-preview-node {
     &__list-cell {
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             padding: 0.5rem;
         }
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             padding-top: 0.25rem;
             padding-bottom: 0.25rem;
         }
@@ -13,14 +13,14 @@
     &__current-state,
     &__action,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
     }
     &__current-state {
         color: var(--icon-color);
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             background-color: var(--oc-blue-0);
         }
     }
@@ -30,7 +30,7 @@
     .hidden-changeset-apply-preview-node {
         &__current-state {
             color: var(--body-color);
-            @include media-breakpoint-up(sm) {
+            @media (--sm-breakpoint-up) {
                 background-color: var(--oc-gray-7);
             }
         }
diff --git a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.module.scss b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.module.scss
index 2631e343990..90dac7a0922 100644
--- a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.module.scss
+++ b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 $changeset-backdrop: #f3faff;
 
@@ -7,29 +7,29 @@ $changeset-backdrop: #f3faff;
     &__action,
     &__information,
     &__show-details {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             // Make it full width in the current row.
             grid-column: 1 / -1;
         }
     }
     &__bg-expanded {
         background-color: $changeset-backdrop;
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             border-top: 1px solid var(--border-color-2);
             padding: 1.5rem;
         }
     }
     &__status-cell {
         color: var(--muted);
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             background-color: var(--oc-blue-0);
         }
     }
     &__list-cell {
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             padding: 0.5rem;
         }
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             padding-top: 0.25rem;
             padding-bottom: 0.25rem;
         }
@@ -57,7 +57,7 @@ $changeset-backdrop: #f3faff;
     .visible-changeset-apply-preview-node {
         &__status-cell {
             color: var(--body-color);
-            @include media-breakpoint-up(sm) {
+            @media (--sm-breakpoint-up) {
                 background-color: var(--oc-gray-7);
             }
         }
diff --git a/client/web/src/enterprise/codeintel/list/CodeIntelIndexesPage.scss b/client/web/src/enterprise/codeintel/list/CodeIntelIndexesPage.scss
index 13c4aa3650f..662b190fc63 100644
--- a/client/web/src/enterprise/codeintel/list/CodeIntelIndexesPage.scss
+++ b/client/web/src/enterprise/codeintel/list/CodeIntelIndexesPage.scss
@@ -5,7 +5,7 @@
         row-gap: 1rem;
         column-gap: 1rem;
         align-items: center;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             row-gap: 0.5rem;
             column-gap: 0.5rem;
         }
diff --git a/client/web/src/enterprise/codeintel/list/CodeIntelUploadsPage.scss b/client/web/src/enterprise/codeintel/list/CodeIntelUploadsPage.scss
index f1de68a2cec..24df0e9161a 100644
--- a/client/web/src/enterprise/codeintel/list/CodeIntelUploadsPage.scss
+++ b/client/web/src/enterprise/codeintel/list/CodeIntelUploadsPage.scss
@@ -5,7 +5,7 @@
         row-gap: 1rem;
         column-gap: 1rem;
         align-items: center;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             row-gap: 0.5rem;
             column-gap: 0.5rem;
         }
diff --git a/client/web/src/enterprise/codeintel/shared/CodeIntelIndexNode.scss b/client/web/src/enterprise/codeintel/shared/CodeIntelIndexNode.scss
index 7c2e9d5ce57..b939d52dbed 100644
--- a/client/web/src/enterprise/codeintel/shared/CodeIntelIndexNode.scss
+++ b/client/web/src/enterprise/codeintel/shared/CodeIntelIndexNode.scss
@@ -3,7 +3,7 @@
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
@@ -11,7 +11,7 @@
 
     &__state,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
diff --git a/client/web/src/enterprise/codeintel/shared/CodeIntelUploadNode.scss b/client/web/src/enterprise/codeintel/shared/CodeIntelUploadNode.scss
index 049b4c774cc..7d8e68056c0 100644
--- a/client/web/src/enterprise/codeintel/shared/CodeIntelUploadNode.scss
+++ b/client/web/src/enterprise/codeintel/shared/CodeIntelUploadNode.scss
@@ -3,7 +3,7 @@
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
@@ -11,7 +11,7 @@
 
     &__state,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
diff --git a/client/web/src/enterprise/productSubscription/TrueUpStatusSummary.scss b/client/web/src/enterprise/productSubscription/TrueUpStatusSummary.scss
index cb5e87493b4..47fd2236174 100644
--- a/client/web/src/enterprise/productSubscription/TrueUpStatusSummary.scss
+++ b/client/web/src/enterprise/productSubscription/TrueUpStatusSummary.scss
@@ -7,7 +7,7 @@
 
     &__item {
         width: 32%;
-        @include media-breakpoint-up(md) {
+        @media (--md-breakpoint-up) {
             width: 100%;
             margin-bottom: 1rem;
         }
diff --git a/client/web/src/extensions/extension/ExtensionAreaHeader.scss b/client/web/src/extensions/extension/ExtensionAreaHeader.scss
index 88123bfd2b8..faeacbae55c 100644
--- a/client/web/src/extensions/extension/ExtensionAreaHeader.scss
+++ b/client/web/src/extensions/extension/ExtensionAreaHeader.scss
@@ -20,7 +20,7 @@
         display: none;
     }
 
-    @include media-breakpoint-up(md) {
+    @media (--md-breakpoint-up) {
         &__wrapper {
             display: grid;
             grid-template-columns: auto 7.5rem 7.5rem;
diff --git a/client/web/src/insights/pages/creation/lang-stats/LangStatsInsightCreationPage.module.scss b/client/web/src/insights/pages/creation/lang-stats/LangStatsInsightCreationPage.module.scss
index 19a3387d372..461c6b8b2e4 100644
--- a/client/web/src/insights/pages/creation/lang-stats/LangStatsInsightCreationPage.module.scss
+++ b/client/web/src/insights/pages/creation/lang-stats/LangStatsInsightCreationPage.module.scss
@@ -1,5 +1,5 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .creation-page {
-    max-width: map-get($grid-breakpoints, md);
+    max-width: $viewport-md;
 }
diff --git a/client/web/src/insights/pages/creation/search-insight/SearchInsightCreationPage.module.scss b/client/web/src/insights/pages/creation/search-insight/SearchInsightCreationPage.module.scss
index 19a3387d372..461c6b8b2e4 100644
--- a/client/web/src/insights/pages/creation/search-insight/SearchInsightCreationPage.module.scss
+++ b/client/web/src/insights/pages/creation/search-insight/SearchInsightCreationPage.module.scss
@@ -1,5 +1,5 @@
-@import 'branded/src/global-styles/breakpoints';
+@import 'wildcard/src/global-styles/breakpoints';
 
 .creation-page {
-    max-width: map-get($grid-breakpoints, md);
+    max-width: $viewport-md;
 }
diff --git a/client/web/src/repo/tree/TreeEntriesSection.scss b/client/web/src/repo/tree/TreeEntriesSection.scss
index e7227c7f6fc..c7c624d51e6 100644
--- a/client/web/src/repo/tree/TreeEntriesSection.scss
+++ b/client/web/src/repo/tree/TreeEntriesSection.scss
@@ -11,13 +11,13 @@
         column-rule: 1px solid var(--border-color);
         border-right: solid 1px var(--border-color);
 
-        @include media-breakpoint-up(sm) {
+        @media (--sm-breakpoint-up) {
             column-count: 1;
         }
-        @include media-breakpoint-up(md) {
+        @media (--md-breakpoint-up) {
             column-count: 3;
         }
-        @include media-breakpoint-down(md) {
+        @media (--md-breakpoint-down) {
             column-count: 4;
         }
     }
diff --git a/client/web/src/search/queryBuilder/QueryBuilder.scss b/client/web/src/search/queryBuilder/QueryBuilder.scss
index f24ac2ec764..5a7d0f83590 100644
--- a/client/web/src/search/queryBuilder/QueryBuilder.scss
+++ b/client/web/src/search/queryBuilder/QueryBuilder.scss
@@ -38,7 +38,7 @@
         &-example {
             font-weight: bold;
 
-            @include media-breakpoint-up(md) {
+            @media (--md-breakpoint-up) {
                 display: none;
             }
         }
@@ -63,7 +63,7 @@
             display: flex;
             align-items: center;
 
-            @include media-breakpoint-up(md) {
+            @media (--md-breakpoint-up) {
                 width: 100%;
             }
         }
diff --git a/client/web/src/search/results/SearchResultsList.scss b/client/web/src/search/results/SearchResultsList.scss
index e44c99ae120..557842bfe08 100644
--- a/client/web/src/search/results/SearchResultsList.scss
+++ b/client/web/src/search/results/SearchResultsList.scss
@@ -22,7 +22,7 @@
 
     // In narrow windows, make the results flush with the left/right sides,
     // but we still need padding for the header and alerts.
-    @include media-breakpoint-down(lg) {
+    @media (--lg-breakpoint-down) {
         &__list {
             padding-left: 0;
             padding-right: 0;
diff --git a/client/web/src/site-admin/SiteAdminMigrationsPage.scss b/client/web/src/site-admin/SiteAdminMigrationsPage.scss
index 28e86819deb..22a6cf23dce 100644
--- a/client/web/src/site-admin/SiteAdminMigrationsPage.scss
+++ b/client/web/src/site-admin/SiteAdminMigrationsPage.scss
@@ -5,7 +5,7 @@
         row-gap: 1rem;
         column-gap: 1rem;
         align-items: center;
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             row-gap: 0.5rem;
             column-gap: 0.5rem;
         }
@@ -17,7 +17,7 @@
         // Make it full width in the current row.
         grid-column: 1 / -1;
         border-top: 1px solid var(--border-color-2);
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             margin-top: 1rem;
             padding-bottom: 1rem;
         }
@@ -25,7 +25,7 @@
 
     &__progress,
     &__information {
-        @include media-breakpoint-down(xs) {
+        @media (--xs-breakpoint-down) {
             grid-column: 1 / -1;
         }
     }
diff --git a/client/web/src/site-admin/SiteAdminSurveyResponsesPage.scss b/client/web/src/site-admin/SiteAdminSurveyResponsesPage.scss
index 1e90e92468c..c98553a8fe0 100644
--- a/client/web/src/site-admin/SiteAdminSurveyResponsesPage.scss
+++ b/client/web/src/site-admin/SiteAdminSurveyResponsesPage.scss
@@ -7,7 +7,7 @@
 
     &__item {
         width: 32%;
-        @include media-breakpoint-up(md) {
+        @media (--md-breakpoint-up) {
             width: 100%;
             margin-bottom: 1rem;
         }
diff --git a/client/wildcard/src/components/NavBar/NavBar.module.scss b/client/wildcard/src/components/NavBar/NavBar.module.scss
index 4b1aec69ce4..0023a5a9b19 100644
--- a/client/wildcard/src/components/NavBar/NavBar.module.scss
+++ b/client/wildcard/src/components/NavBar/NavBar.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints.scss';
+@import '../../global-styles/breakpoints';
 
 .navbar {
     display: flex;
@@ -13,7 +13,7 @@
 }
 
 .menu-close {
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         display: none !important;
     }
 }
@@ -21,7 +21,7 @@
     color: var(--icon-color);
     display: none;
     padding: 0;
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         display: block;
     }
 }
@@ -45,7 +45,7 @@
     height: 100%;
     margin: 0;
     padding: 0;
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         border-radius: 3px;
         border: 1px solid var(--border-color);
         width: 50%;
diff --git a/client/wildcard/src/components/NavBar/NavItem.module.scss b/client/wildcard/src/components/NavBar/NavItem.module.scss
index d0fb1a93350..935502ed985 100644
--- a/client/wildcard/src/components/NavBar/NavItem.module.scss
+++ b/client/wildcard/src/components/NavBar/NavItem.module.scss
@@ -1,4 +1,4 @@
-@import 'branded/src/global-styles/breakpoints.scss';
+@import '../../global-styles/breakpoints';
 
 .link {
     outline-offset: -1px;
@@ -17,11 +17,11 @@
             box-shadow: 0 0 0 2px var(--primary-2);
         }
         .icon {
-            @include media-breakpoint-down(md) {
+            @media (--md-breakpoint-down) {
                 outline: 1px solid transparent;
                 box-shadow: 0 0 0 2px var(--primary-2);
             }
-            @include media-breakpoint-down(sm) {
+            @media (--sm-breakpoint-down) {
                 outline: none;
                 box-shadow: none;
             }
@@ -37,7 +37,7 @@
             margin-bottom: -0.125rem;
         }
     }
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         padding: 0.25rem 0;
         flex: 1;
         align-items: flex-start;
@@ -57,11 +57,11 @@
     }
     &:first-child,
     &:last-child {
-        @include media-breakpoint-down(sm) {
+        @media (--sm-breakpoint-down) {
             margin: 0;
         }
     }
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         margin: 0;
     }
 }
@@ -76,7 +76,7 @@
 .icon {
     color: var(--header-icon-color);
     border-radius: 3px;
-    @include media-breakpoint-down(md) {
+    @media (--md-breakpoint-down) {
         color: var(--icon-color);
     }
 }
@@ -84,10 +84,10 @@
 .icon-included {
     margin-left: 0.25rem;
     display: inline-flex;
-    @include media-breakpoint-down(md) {
+    @media (--md-breakpoint-down) {
         display: none;
     }
-    @include media-breakpoint-down(sm) {
+    @media (--sm-breakpoint-down) {
         display: inline-flex;
     }
 }
diff --git a/client/wildcard/src/components/PageHeader/PageHeader.module.scss b/client/wildcard/src/components/PageHeader/PageHeader.module.scss
index 5f1d06ac6f5..56606ce2184 100644
--- a/client/wildcard/src/components/PageHeader/PageHeader.module.scss
+++ b/client/wildcard/src/components/PageHeader/PageHeader.module.scss
@@ -1,3 +1,5 @@
+@import '../../global-styles/breakpoints';
+
 // Scale icon size with heading size. 26px font size (h1) -> 22px icon size
 $path-icon-size: (22em / 26);
 
@@ -7,7 +9,7 @@ $path-icon-size: (22em / 26);
     flex-wrap: wrap;
     justify-content: space-between;
 
-    @media (min-width: 768px) {
+    @media (--md-breakpoint-up) {
         flex-direction: row;
         align-items: flex-end;
     }
@@ -65,7 +67,7 @@ $path-icon-size: (22em / 26);
 .actions {
     margin-top: 1rem;
 
-    @media (min-width: 768px) {
+    @media (--md-breakpoint-up) {
         margin-top: 0;
     }
 }
diff --git a/client/wildcard/src/global-styles/breakpoints.scss b/client/wildcard/src/global-styles/breakpoints.scss
new file mode 100644
index 00000000000..d65794dcb1e
--- /dev/null
+++ b/client/wildcard/src/global-styles/breakpoints.scss
@@ -0,0 +1,25 @@
+// To use breakpoints mixins in CSS modules import this file via:
+// @import 'wildcard/src/global-styles/breakpoints';
+
+$viewport-sm: 576px;
+$viewport-md: 768px;
+$viewport-lg: 992px;
+$viewport-xl: 1200px;
+
+/* stylelint-disable unknownAtRules */
+@custom-media --xs-breakpoint-up (min-width: none);
+@custom-media --sm-breakpoint-up (min-width: #{$viewport-sm});
+@custom-media --md-breakpoint-up (min-width: #{$viewport-md});
+@custom-media --lg-breakpoint-up (min-width: #{$viewport-lg});
+@custom-media --xl-breakpoint-up (min-width: #{$viewport-xl});
+
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+@custom-media --xs-breakpoint-down (max-width: #{$viewport-sm - .02});
+@custom-media --sm-breakpoint-down (max-width: #{$viewport-md - .02});
+@custom-media --md-breakpoint-down (max-width: #{$viewport-lg - .02});
+@custom-media --lg-breakpoint-down (max-width: #{$viewport-xl - .02});
+@custom-media --xl-breakpoint-down (max-width: none);
diff --git a/package.json b/package.json
index bc6d15e3499..3d13bd9a1d8 100644
--- a/package.json
+++ b/package.json
@@ -252,6 +252,7 @@
     "p-retry": "^4.2.0",
     "p-timeout": "^4.1.0",
     "postcss": "^8.2.4",
+    "postcss-custom-media": "^8.0.0",
     "postcss-focus-visible": "^5.0.0",
     "postcss-loader": "^4.1.0",
     "prettier": "^2.2.1",
diff --git a/postcss.config.js b/postcss.config.js
index caeb6362648..7eca2906118 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('autoprefixer'), require('postcss-focus-visible')],
+  plugins: [require('autoprefixer'), require('postcss-focus-visible'), require('postcss-custom-media')],
 }
diff --git a/yarn.lock b/yarn.lock
index b7a031679b1..b7eff5c87ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17555,6 +17555,11 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-custom-media@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz#1be6aff8be7dc9bf1fe014bde3b71b92bb4552f1"
+  integrity sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==
+
 postcss-discard-comments@^4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"