diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 533632df88e2..0f66c596ba97 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,9 +56,6 @@ importers:
       '@types/jest':
         specifier: ^29.5.3
         version: 29.5.3
-      breakpoint-sass:
-        specifier: ^3.0.0
-        version: 3.0.0(sass@1.69.5)
       jest:
         specifier: ^29.6.2
         version: 29.6.2(@types/node@20.9.1)
@@ -2264,14 +2261,6 @@ packages:
       fill-range: 7.0.1
     dev: false
 
-  /breakpoint-sass@3.0.0(sass@1.69.5):
-    resolution: {integrity: sha512-qxJqSfTaOHI+RCGzvKWVRwwC2hMIaS0KV1b+asqWUFxdLv/yKNADF7AtT1uNnkt2VxSMZ2csM22CSc+Hez+EIg==}
-    peerDependencies:
-      sass: ^1.25
-    dependencies:
-      sass: 1.69.5
-    dev: false
-
   /browserslist@4.21.10:
     resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -3151,10 +3140,6 @@ packages:
     engines: {node: '>= 4'}
     dev: false
 
-  /immutable@4.3.4:
-    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
-    dev: false
-
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -4583,16 +4568,6 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
-  /sass@1.69.5:
-    resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.4
-      source-map-js: 1.0.2
-    dev: false
-
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
     dev: false
@@ -4676,11 +4651,6 @@ packages:
     engines: {node: '>=8.3.0'}
     dev: false
 
-  /source-map-js@1.0.2:
-    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /source-map-support@0.5.13:
     resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
     dependencies:
diff --git a/ui/analyse/css/_action-menu.scss b/ui/analyse/css/_action-menu.scss
index 3d9a4dda2e83..bcde8df6a17d 100644
--- a/ui/analyse/css/_action-menu.scss
+++ b/ui/analyse/css/_action-menu.scss
@@ -116,7 +116,7 @@
     }
   }
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     .abset-inline {
       display: none;
     }
diff --git a/ui/analyse/css/_analyse.base.scss b/ui/analyse/css/_analyse.base.scss
index e6f67491f915..b6a9552b64f1 100644
--- a/ui/analyse/css/_analyse.base.scss
+++ b/ui/analyse/css/_analyse.base.scss
@@ -3,7 +3,7 @@
 %border-bottom-active {
   border-bottom: $border;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     border-bottom: 3px solid $c-secondary;
   }
 }
diff --git a/ui/analyse/css/_fork.scss b/ui/analyse/css/_fork.scss
index 37cc62158197..c46c30dca0b3 100644
--- a/ui/analyse/css/_fork.scss
+++ b/ui/analyse/css/_fork.scss
@@ -5,7 +5,7 @@ $c-fork: $c-primary;
 
   flex: 0 0 auto;
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     display: none;
   }
 
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
index 0b08c629afb3..ecab90f69348 100644
--- a/ui/analyse/css/_layout.scss
+++ b/ui/analyse/css/_layout.scss
@@ -8,7 +8,7 @@ body {
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --main-max-width: auto;
   }
 }
@@ -42,7 +42,7 @@ body {
   &__underboard {
     grid-area: under;
 
-    @include breakpoint($mq-col1-uniboard) {
+    @include mq-is-col1 {
       overflow: hidden; // helps truncating long study names
     }
   }
@@ -84,7 +84,7 @@ body {
     'chat'
     'uchat';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: var(--col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -112,11 +112,11 @@ body {
     }
   }
 
-  @include breakpoint($mq-col2-uniboard-squeeze) {
+  @include mq-is-col2-squeeze {
     grid-template-columns: $col2-uniboard-squeeze-width $analyse-block-gap $col2-uniboard-squeeze-table;
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
     grid-template-rows: auto $chat-height 2.5em 1fr;
     grid-template-areas:
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
index e8057af75ce3..3a9ab7c8d34d 100644
--- a/ui/analyse/css/_player-clock.scss
+++ b/ui/analyse/css/_player-clock.scss
@@ -25,7 +25,7 @@ $clock-height: 20px;
   }
 
   /* Where to put them in col1 layout? It moves the entire board and controls down for little benefit */
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     display: none;
   }
 }
diff --git a/ui/analyse/css/_round-training.scss b/ui/analyse/css/_round-training.scss
index f81153e18ef1..0469d24bbc0d 100644
--- a/ui/analyse/css/_round-training.scss
+++ b/ui/analyse/css/_round-training.scss
@@ -56,7 +56,7 @@
     margin: 0.6em 0;
   }
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     flex-flow: row wrap;
     justify-content: center;
     padding-bottom: $analyse-block-gap;
diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
index c9f404560a23..5a98ee5ac9ff 100644
--- a/ui/analyse/css/_round-underboard.scss
+++ b/ui/analyse/css/_round-underboard.scss
@@ -42,7 +42,7 @@ $col2-panel-height: 240px;
   &__panels {
     --panel-height: #{$col1-panel-height};
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       --panel-height: #{$col2-panel-height};
     }
 
diff --git a/ui/analyse/css/_side.scss b/ui/analyse/css/_side.scss
index b2db6c87463e..89479cb28348 100644
--- a/ui/analyse/css/_side.scss
+++ b/ui/analyse/css/_side.scss
@@ -5,7 +5,7 @@
     .back-to-game {
       margin-top: 2em;
 
-      @include breakpoint($mq-col3) {
+      @include mq-at-least-col3 {
         margin-top: 10vh;
       }
 
@@ -18,7 +18,7 @@
     .analyse__wiki {
       margin-top: 2vh;
       flex: 1 1 auto;
-      @include breakpoint($mq-col3) {
+      @include mq-at-least-col3 {
         flex: 1 1 0;
         padding: 0.5em 1em 0 0;
       }
diff --git a/ui/analyse/css/_tools.scss b/ui/analyse/css/_tools.scss
index e488792da19e..1648fd4d4858 100644
--- a/ui/analyse/css/_tools.scss
+++ b/ui/analyse/css/_tools.scss
@@ -129,7 +129,7 @@
 
     .persistence {
       color: $c-good;
-      @include breakpoint($mq-not-xx-small) {
+      @media (max-width: at-most($xx-small)) {
         display: none;
       }
     }
@@ -140,7 +140,7 @@
       color: $c-good-over;
     }
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       height: $col1-uniboard-controls;
 
       .fbt {
diff --git a/ui/analyse/css/_variables.scss b/ui/analyse/css/_variables.scss
index b98ea7ab118e..9a1f933758e1 100644
--- a/ui/analyse/css/_variables.scss
+++ b/ui/analyse/css/_variables.scss
@@ -1,6 +1,2 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 $meta-height: var(--meta-height);
 $chat-height: var(--chat-height);
diff --git a/ui/analyse/css/_zh.scss b/ui/analyse/css/_zh.scss
index 2b83b030a8ad..24d9415b6b34 100644
--- a/ui/analyse/css/_zh.scss
+++ b/ui/analyse/css/_zh.scss
@@ -31,7 +31,7 @@ $pocket-height: 60px;
     'chat'
     'uchat';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-rows: $pocket-height auto $pocket-height;
     grid-template-areas:
       'board      gauge pocket-top'
@@ -44,7 +44,7 @@ $pocket-height: 60px;
       'uchat      .     side';
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-rows: $pocket-height $meta-height $chat-height $pocket-height;
     grid-template-areas:
       'side    . board gauge pocket-top'
@@ -56,7 +56,7 @@ $pocket-height: 60px;
   }
 }
 
-@include breakpoint($mq-col1) {
+@include mq-is-col1 {
   .pocket {
     &-top {
       margin-bottom: $block-gap-half;
diff --git a/ui/analyse/css/explorer/_explorer.scss b/ui/analyse/css/explorer/_explorer.scss
index 015afc6c8cb6..07b30ffcd547 100644
--- a/ui/analyse/css/explorer/_explorer.scss
+++ b/ui/analyse/css/explorer/_explorer.scss
@@ -138,8 +138,8 @@
       background: mix($c-primary, $c-bg-box, 25%);
       font-weight: bold;
 
-      @include breakpoint($mq-col2) {
-        @include breakpoint($mq-x-short) {
+      @include mq-at-least-col2 {
+        @media (min-width: at-least($x-short)) {
           position: sticky;
           bottom: 0;
         }
diff --git a/ui/analyse/css/practice/_layout.scss b/ui/analyse/css/practice/_layout.scss
index b463cbe27ee0..94dd9ec3d818 100644
--- a/ui/analyse/css/practice/_layout.scss
+++ b/ui/analyse/css/practice/_layout.scss
@@ -11,11 +11,11 @@
   grid-template-rows: auto;
   grid-template-areas: 'board' 'controls' 'under' 'tools' 'side';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-areas: 'board gauge tools' 'under .     controls' 'side  .     .';
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side    . board gauge tools' '.       . under .     controls';
 
diff --git a/ui/analyse/css/study/_index.scss b/ui/analyse/css/study/_index.scss
index beca74e62b13..3266ce685353 100644
--- a/ui/analyse/css/study/_index.scss
+++ b/ui/analyse/css/study/_index.scss
@@ -34,7 +34,7 @@ $top-height: 3.2rem;
         height: $top-height;
         font-size: 1.1em;
 
-        @include breakpoint($mq-xx-small) {
+        @media (min-width: at-least($xx-small)) {
           font-size: 1.2em;
         }
       }
diff --git a/ui/analyse/css/study/_list-widget.scss b/ui/analyse/css/study/_list-widget.scss
index f31322989e9e..e031e9289803 100644
--- a/ui/analyse/css/study/_list-widget.scss
+++ b/ui/analyse/css/study/_list-widget.scss
@@ -4,7 +4,7 @@ $c-study: $c-primary;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax($viewport-min-width, 1fr));
 
-  @include breakpoint($mq-medium) {
+  @media (min-width: at-least($medium)) {
     grid-template-columns: repeat(auto-fill, minmax(45ch, 1fr));
   }
 
@@ -79,7 +79,7 @@ $c-study: $c-primary;
         margin-#{$end-direction}: 0.2em;
 
         @include transition;
-        @include breakpoint($mq-not-xx-small) {
+        @media (max-width: at-most($xx-small)) {
           display: none;
         }
       }
diff --git a/ui/analyse/css/study/_modal.scss b/ui/analyse/css/study/_modal.scss
index 285b02902eeb..ec3535a517d1 100644
--- a/ui/analyse/css/study/_modal.scss
+++ b/ui/analyse/css/study/_modal.scss
@@ -1,7 +1,7 @@
 .dialog-content {
   min-width: 80vw;
 
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     min-width: 500px;
   }
 
diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
index 25f5ce261086..ab2b47ea4689 100644
--- a/ui/analyse/css/study/_player.scss
+++ b/ui/analyse/css/study/_player.scss
@@ -7,13 +7,13 @@ $player-height: 1.6rem;
     border-radius: 0;
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     .analyse__underboard {
       margin-top: calc(#{$player-height / 2} + #{$analyse-block-gap / 2});
     }
   }
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     .analyse__controls {
       margin-top: $player-height;
     }
diff --git a/ui/analyse/css/study/_search.scss b/ui/analyse/css/study/_search.scss
index 4530013c1dd2..d72d29ae14d3 100644
--- a/ui/analyse/css/study/_search.scss
+++ b/ui/analyse/css/study/_search.scss
@@ -1,5 +1,5 @@
 .study-search {
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     width: 500px;
   }
   input {
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
index 62086de7d6b7..a0ed9ef06dfc 100644
--- a/ui/analyse/css/study/relay/_layout.scss
+++ b/ui/analyse/css/study/relay/_layout.scss
@@ -4,7 +4,7 @@ body {
   --site-header-margin: 1em;
   --allow-video: false;
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     --allow-video: true;
   }
 }
@@ -21,7 +21,7 @@ main.is-relay {
     grid-area: relay-admin;
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     #video-player-placeholder,
     button.streamer-show {
       display: block;
@@ -43,7 +43,7 @@ main.is-relay.has-relay-tour {
     max-height: 40vh;
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-rows: 80vh;
     grid-template-areas:
       'relay-tour . side'
@@ -57,7 +57,7 @@ main.is-relay.has-relay-tour {
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side $block-gap-half var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table;
     grid-template-rows: $mq-col3-side-height;
     grid-template-areas:
@@ -81,7 +81,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
   .chat__members {
     display: none;
   }
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-rows: calc(var(--cg-height) / 2) calc(var(--cg-height) / 2) 2.5em;
     grid-template-areas:
       'board        gauge side'
@@ -93,7 +93,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
       margin-top: unset;
     }
   }
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-rows: var(--cg-height) 2.5em;
     grid-template-areas:
       'side           . board gauge tools'
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
index f989444ebe7d..e2ef1e7c7e08 100644
--- a/ui/analyse/css/study/relay/_tour.scss
+++ b/ui/analyse/css/study/relay/_tour.scss
@@ -46,7 +46,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
         font-size: 1.2em;
         color: $c-font-dim;
       }
-      @include breakpoint($mq-col2) {
+      @include mq-at-least-col2 {
         display: flex;
       }
     }
@@ -122,7 +122,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
       line-height: 2em;
     }
 
-    @include breakpoint($mq-x-small) {
+    @media (min-width: at-least($x-small)) {
       &__image {
         display: block;
       }
@@ -138,7 +138,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
       @extend %flex-column;
       flex: 1;
       gap: 1em;
-      @include breakpoint($mq-col3) {
+      @include mq-at-least-col3 {
         gap: calc(var(--box-padding) / 3);
       }
       margin: 1em 2em;
@@ -314,7 +314,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
   }
 
   .study__multiboard {
-    @include breakpoint($mq-xx-large) {
+    @media (min-width: at-least($xx-large)) {
       margin: 0 calc(var(--box-padding) - 1em);
       .now-playing a {
         padding: 0.8em;
diff --git a/ui/board/css/_menu.scss b/ui/board/css/_menu.scss
index 008f5789c7fe..b455185e1ca1 100644
--- a/ui/board/css/_menu.scss
+++ b/ui/board/css/_menu.scss
@@ -4,13 +4,13 @@
   padding: 0.5em 1.5em;
   user-select: none;
 
-  @include breakpoint($mq-small) {
+  @media (min-width: at-least($small)) {
     position: absolute;
     right: 0;
     min-width: 100%;
     z-index: z(mz-menu);
   }
-  @include breakpoint($mq-not-small) {
+  @media (max-width: at-most($small)) {
     position: fixed;
     top: 50% !important;
     left: 50%;
diff --git a/ui/ceval/css/_ctrl.scss b/ui/ceval/css/_ctrl.scss
index a7edfcdb0b97..9eb081e11ebb 100644
--- a/ui/ceval/css/_ctrl.scss
+++ b/ui/ceval/css/_ctrl.scss
@@ -191,10 +191,10 @@
   text-align: left;
   max-width: 60vw;
 
-  @media (max-width: $mq-width-medium) {
+  @media (max-width: at-most($medium)) {
     max-width: 80vw;
   }
-  @media (max-width: $mq-width-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     max-width: unset;
     width: 96vw;
   }
diff --git a/ui/ceval/css/_eval-gauge.scss b/ui/ceval/css/_eval-gauge.scss
index ad0177eae63c..bacc6e427a4c 100644
--- a/ui/ceval/css/_eval-gauge.scss
+++ b/ui/ceval/css/_eval-gauge.scss
@@ -4,7 +4,7 @@
   background: if($theme-light, #fff, #a0a0a0);
   overflow: hidden;
 
-  @include breakpoint($mq-col1-uniboard) {
+  @include mq-is-col1 {
     display: none;
   }
 
diff --git a/ui/ceval/css/_settings.scss b/ui/ceval/css/_settings.scss
index 8a9f6deb7bee..822b34eaea9c 100644
--- a/ui/ceval/css/_settings.scss
+++ b/ui/ceval/css/_settings.scss
@@ -12,7 +12,7 @@
   gap: 1.5em;
   padding: 2em 1.5em;
 
-  @media (max-width: $mq-width-small) {
+  @media (max-width: at-most($small)) {
     gap: 1em;
     br {
       display: none;
diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
index 5371c47868ec..39bee7300af6 100644
--- a/ui/challenge/css/_page.scss
+++ b/ui/challenge/css/_page.scss
@@ -24,7 +24,7 @@
     }
 
     &__user {
-      @include breakpoint($mq-x-small) {
+      @media (min-width: at-least($x-small)) {
         grid-area: 1 / 2 / 3 / 2;
       }
 
@@ -86,7 +86,7 @@
     margin-bottom: 4rem;
     font-size: 1.5em;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       font-size: 2em;
     }
 
@@ -102,7 +102,7 @@
         font-size: 6rem;
         margin-#{$end-direction}: 0.2em;
 
-        @include breakpoint($mq-not-xx-small) {
+        @media (max-width: at-most($xx-small)) {
           display: none;
         }
       }
diff --git a/ui/chat/css/_discussion.scss b/ui/chat/css/_discussion.scss
index 37f64f7368e8..18b67fed9a3b 100644
--- a/ui/chat/css/_discussion.scss
+++ b/ui/chat/css/_discussion.scss
@@ -5,7 +5,7 @@
     flex: 1 1 auto;
     max-height: 50vh;
 
-    @include breakpoint($mq-col3-uniboard) {
+    @include mq-at-least-col3 {
       max-height: none;
     }
 
diff --git a/ui/chess/css/_zh-pocket.scss b/ui/chess/css/_zh-pocket.scss
index 9dfd724126b7..3135c4afb59a 100644
--- a/ui/chess/css/_zh-pocket.scss
+++ b/ui/chess/css/_zh-pocket.scss
@@ -7,7 +7,7 @@
   margin: auto;
   justify-content: center;
 
-  @include breakpoint($mq-col2-uniboard) {
+  @include mq-at-least-col2 {
     width: 100%;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset;
   }
diff --git a/ui/cli/css/_clinput.scss b/ui/cli/css/_clinput.scss
index f69f4729e9c7..66e31b3dc03c 100644
--- a/ui/cli/css/_clinput.scss
+++ b/ui/cli/css/_clinput.scss
@@ -11,7 +11,7 @@
     border: 0;
     width: 0;
 
-    @include breakpoint($mq-x-large) {
+    @media (min-width: at-least($x-large)) {
       @include transition(width);
     }
 
@@ -26,19 +26,19 @@
 }
 
 body.clinput #top {
-  @include breakpoint($mq-not-x-large) {
+  @media (max-width: at-most($x-large)) {
     #topnav {
       display: none;
     }
   }
 
-  @include breakpoint($mq-not-x-small) {
+  @media (max-width: at-most($x-small)) {
     .site-title {
       display: none;
     }
   }
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     .site-buttons > *:not(#clinput) {
       display: none;
     }
diff --git a/ui/common/css/_embed.scss b/ui/common/css/_embed.scss
index aeb594343e70..7f8240212fe0 100644
--- a/ui/common/css/_embed.scss
+++ b/ui/common/css/_embed.scss
@@ -1,7 +1,5 @@
 /* Common imports for all embedded widgets */
 
-@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
 @import 'abstract/all';
 @import 'base/elements';
 @import 'base/fonts';
diff --git a/ui/common/css/_lichess.scss b/ui/common/css/_lichess.scss
index a52f012d827c..5da8350c4ada 100644
--- a/ui/common/css/_lichess.scss
+++ b/ui/common/css/_lichess.scss
@@ -1,7 +1,4 @@
 /* Common imports for all pages */
-
-@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
 @import 'abstract/all';
 
 @import 'base/elements';
diff --git a/ui/common/css/_plugin.scss b/ui/common/css/_plugin.scss
index 6575280daa8f..41937821ea59 100644
--- a/ui/common/css/_plugin.scss
+++ b/ui/common/css/_plugin.scss
@@ -1,5 +1,3 @@
 /* Common imports for all CSS modules */
 
-@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
 @import 'abstract/all';
diff --git a/ui/common/css/abstract/_functions.scss b/ui/common/css/abstract/_functions.scss
index c3172be7ccfd..dae7405e03e3 100644
--- a/ui/common/css/abstract/_functions.scss
+++ b/ui/common/css/abstract/_functions.scss
@@ -5,3 +5,11 @@
 @function img-url($path) {
   @return url('#{$img-path}/#{$path}');
 }
+
+@function at-least($width) {
+  @return $width - 0.7px;
+}
+
+@function at-most($width) {
+  @return $width - 0.71px;
+}
diff --git a/ui/common/css/abstract/_media-queries.scss b/ui/common/css/abstract/_media-queries.scss
index 2ceeb27daa3e..ef52f68f2272 100644
--- a/ui/common/css/abstract/_media-queries.scss
+++ b/ui/common/css/abstract/_media-queries.scss
@@ -1,58 +1,60 @@
-/* Widths */
-
-$mq-width-xx-small: 500px;
-$mq-width-x-small: 650px;
-$mq-width-small: 800px;
-$mq-width-medium: 980px;
-$mq-width-large: 1120px;
-$mq-width-x-large: 1260px;
-$mq-width-xx-large: 1500px;
-
-$mq-xx-small: min-width ($mq-width-xx-small - 0.7px);
-$mq-x-small: min-width ($mq-width-x-small - 0.7px);
-$mq-small: min-width ($mq-width-small - 0.7px);
-$mq-medium: min-width ($mq-width-medium - 0.7px);
-$mq-large: min-width ($mq-width-large - 0.7px);
-$mq-x-large: min-width ($mq-width-x-large - 0.7px);
-$mq-xx-large: min-width ($mq-width-xx-large - 0.7px);
-
-$mq-less-than-400: max-width 400px;
-$mq-not-xx-small: max-width ($mq-width-xx-small - 0.71px);
-$mq-not-x-small: max-width ($mq-width-x-small - 0.71px);
-$mq-not-small: max-width ($mq-width-small - 0.71px);
-$mq-not-medium: max-width ($mq-width-medium - 0.71px);
-$mq-not-large: max-width ($mq-width-large - 0.71px);
-$mq-not-x-large: max-width ($mq-width-x-large - 0.71px);
-
-/* Heights */
-
-$mq-x-short: min-height 399.3px;
-$mq-short: min-height 500px;
-$mq-tall: min-height 600px;
-$mq-x-tall: min-height 700px;
-
-$mq-not-x-short: max-height 399.29px;
-
-/* Orientations */
-
-$mq-portrait: orientation portrait;
-$mq-landscape: orientation landscape;
-
-/* Capabilities */
-
-$mq-hover-yes: 'hover: hover';
-$mq-hover-no: hover none;
-
-/* Aliases */
-
-$mq-main-margin: $mq-small;
-
-$mq-topnav-visible: $mq-medium;
-$mq-topnav-hidden: $mq-not-medium;
-
-$mq-site-header-tall: $mq-tall;
-
-$mq-subnav-top: $mq-not-small;
-$mq-subnav-side: $mq-small;
-
-$mq-zoom-enabled: $mq-small $mq-short;
+@mixin mq-is-col1 {
+  @media (max-width: at-most($small)) and (orientation: portrait) {
+    @content;
+  }
+}
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($small)), (orientation: landscape) {
+    @content;
+  }
+}
+@mixin mq-is-col2-squeeze {
+  @media (max-width: at-most($small)) and (orientation: landscape) {
+    @content;
+  }
+}
+@mixin mq-at-least-col3 {
+  @media (min-width: at-least($x-large)) {
+    @content;
+  }
+}
+@mixin mq-site-header-tall {
+  @media (min-height: at-least($tall)) {
+    @content;
+  }
+}
+@mixin mq-topnav-hidden {
+  @media (max-width: at-most($medium)) {
+    @content;
+  }
+}
+@mixin mq-topnav-visible {
+  @media (min-width: at-least($medium)) {
+    @content;
+  }
+}
+@mixin mq-topnav-visible-and-tall {
+  @media (min-width: at-least($medium)) and (min-height: at-least($tall)) {
+    @content;
+  }
+}
+@mixin mq-subnav-top {
+  @media (max-width: at-most($small)) {
+    @content;
+  }
+}
+@mixin mq-subnav-side {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
+@mixin mq-zoom-enabled {
+  @media (min-width: at-least($small)) and (min-height: at-least($short)) {
+    @content;
+  }
+}
+@mixin mq-board-resizable {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
diff --git a/ui/common/css/abstract/_mixins.scss b/ui/common/css/abstract/_mixins.scss
index abff368b14a0..cd3186abdc2c 100644
--- a/ui/common/css/abstract/_mixins.scss
+++ b/ui/common/css/abstract/_mixins.scss
@@ -15,7 +15,7 @@
   #zoom-input {
     display: none;
 
-    @include breakpoint($mq-zoom-enabled) {
+    @include mq-zoom-enabled {
       display: block;
       position: fixed;
       bottom: 3px;
diff --git a/ui/common/css/abstract/_uniboard.scss b/ui/common/css/abstract/_uniboard.scss
index 6a7e631a1b73..d5e5c285c788 100644
--- a/ui/common/css/abstract/_uniboard.scss
+++ b/ui/common/css/abstract/_uniboard.scss
@@ -1,13 +1,5 @@
 /* Uniboard: keep the same page layout across pages */
 
-$mq-board-resizable: $mq-small;
-$mq-col1-uniboard: $mq-not-small $mq-portrait;
-$mq-col2-uniboard: $mq-small, $mq-landscape;
-$mq-col3-uniboard: $mq-x-large;
-
-/* when the width is appropriate for col1, but landscape prevents it */
-$mq-col2-uniboard-squeeze: $mq-not-small $mq-landscape;
-
 $scrollbar-width: 20px;
 
 $col3-uniboard-side-min: 250px;
diff --git a/ui/common/css/abstract/_variables.scss b/ui/common/css/abstract/_variables.scss
index abe180b984c4..626240a25832 100644
--- a/ui/common/css/abstract/_variables.scss
+++ b/ui/common/css/abstract/_variables.scss
@@ -28,3 +28,17 @@ $site-header-height: var(--site-header-height);
 $site-header-margin: var(--site-header-margin);
 
 $site-header-outer-height: calc(#{$site-header-height} + #{$site-header-margin});
+
+$xxx-small: 400px;
+$xx-small: 500px;
+$x-small: 650px;
+$small: 800px;
+$medium: 980px;
+$large: 1120px;
+$x-large: 1260px;
+$xx-large: 1500px;
+
+$x-short: 400px;
+$short: 500px;
+$tall: 600px;
+$x-tall: 700px;
diff --git a/ui/common/css/component/_announce.scss b/ui/common/css/component/_announce.scss
index 75428aad516a..f75d1fe3bec0 100644
--- a/ui/common/css/component/_announce.scss
+++ b/ui/common/css/component/_announce.scss
@@ -11,7 +11,7 @@
   z-index: z('tour-reminder');
   width: 100%;
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     width: auto;
     border-top-right-radius: 3px;
   }
diff --git a/ui/common/css/component/_board-resize.scss b/ui/common/css/component/_board-resize.scss
index bd0d6d80eac7..f46e5bdab0c3 100644
--- a/ui/common/css/component/_board-resize.scss
+++ b/ui/common/css/component/_board-resize.scss
@@ -7,7 +7,7 @@ cg-resize {
 
   display: none;
 
-  @include breakpoint($mq-board-resizable) {
+  @include mq-board-resizable {
     display: block;
     position: absolute;
     right: #{13px - $resize-width};
diff --git a/ui/common/css/component/_box.scss b/ui/common/css/component/_box.scss
index cd3d82820bdb..6a50977f1b9d 100644
--- a/ui/common/css/component/_box.scss
+++ b/ui/common/css/component/_box.scss
@@ -42,7 +42,7 @@ $vp-max-width: 1200px;
   }
 }
 
-@include breakpoint($mq-main-margin) {
+@media (min-width: at-least($small)) {
   .box {
     @include box-radius;
   }
diff --git a/ui/common/css/component/_crosstable.scss b/ui/common/css/component/_crosstable.scss
index bce51e8c31b0..df533030273e 100644
--- a/ui/common/css/component/_crosstable.scss
+++ b/ui/common/css/component/_crosstable.scss
@@ -85,7 +85,7 @@
       opacity: 0.2;
     }
 
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       display: none;
 
       &:nth-last-child(-n + 12) {
diff --git a/ui/common/css/component/_friend-box.scss b/ui/common/css/component/_friend-box.scss
index 8d2c74d75099..fe3249cb5f4f 100644
--- a/ui/common/css/component/_friend-box.scss
+++ b/ui/common/css/component/_friend-box.scss
@@ -1,7 +1,7 @@
 #friend_box {
   display: none;
 
-  @include breakpoint($mq-topnav-visible $mq-site-header-tall) {
+  @include mq-topnav-visible-and-tall {
     display: block;
   }
 
diff --git a/ui/common/css/component/_mascot.scss b/ui/common/css/component/_mascot.scss
index c62d94296740..599307d2ec18 100644
--- a/ui/common/css/component/_mascot.scss
+++ b/ui/common/css/component/_mascot.scss
@@ -10,7 +10,7 @@
     width: 160px;
     height: 160px;
     margin: -4em var(--box-padding) 1vh 1vw;
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       display: none;
       margin: 0;
     }
diff --git a/ui/common/css/component/_modal.scss b/ui/common/css/component/_modal.scss
index 95ead1e7875c..891c20881243 100644
--- a/ui/common/css/component/_modal.scss
+++ b/ui/common/css/component/_modal.scss
@@ -39,7 +39,7 @@
         color: #fff;
       }
 
-      @include breakpoint($mq-small) {
+      @media (min-width: at-least($small)) {
         top: -12px;
         #{$end-direction}: -12px;
         background: $c-bg-popup;
diff --git a/ui/common/css/component/_mselect.scss b/ui/common/css/component/_mselect.scss
index c18a17f6c10a..ad6b2e542dab 100644
--- a/ui/common/css/component/_mselect.scss
+++ b/ui/common/css/component/_mselect.scss
@@ -89,7 +89,7 @@ $c-mselect: $c-primary;
     .mselect__toggle:checked ~ & {
       transform: scale(1, 1);
 
-      @include breakpoint($mq-not-small) {
+      @media (max-width: at-most($small)) {
         position: fixed;
         top: 50%;
         transform: translateY(-50%) scale(1, 1);
diff --git a/ui/common/css/component/_now-playing.scss b/ui/common/css/component/_now-playing.scss
index e3659472b90f..3ab933677af4 100644
--- a/ui/common/css/component/_now-playing.scss
+++ b/ui/common/css/component/_now-playing.scss
@@ -2,7 +2,7 @@
   display: grid;
   --np-min-width: 200px;
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     --np-min-width: 50%;
   }
 
diff --git a/ui/common/css/component/_podium.scss b/ui/common/css/component/_podium.scss
index ec436fa8ba4f..de7ca6fe4083 100644
--- a/ui/common/css/component/_podium.scss
+++ b/ui/common/css/component/_podium.scss
@@ -21,7 +21,7 @@
 }
 
 .podium {
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     display: none;
   }
   > div {
@@ -81,7 +81,7 @@
     background-image: img-url('trophy/lichess-bronze-2.svg');
   }
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     .trophy {
       display: none;
     }
diff --git a/ui/common/css/component/_slist.scss b/ui/common/css/component/_slist.scss
index d33ac0c9230c..da29886ab48b 100644
--- a/ui/common/css/component/_slist.scss
+++ b/ui/common/css/component/_slist.scss
@@ -62,7 +62,7 @@
   max-width: calc(100vw - var(--box-padding) * 2);
 
   .slist {
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       min-width: calc(650px - var(--box-padding) * 2);
     }
   }
@@ -70,7 +70,7 @@
 
 /* requires each td to have a data-label attribute */
 .slist.slist-resp {
-  @include breakpoint($mq-not-x-small) {
+  @media (max-width: at-most($x-small)) {
     border-collapse: collapse;
     table-layout: fixed;
     thead {
diff --git a/ui/common/css/component/_subnav.scss b/ui/common/css/component/_subnav.scss
index 1a4433c018d7..982bd94306c8 100644
--- a/ui/common/css/component/_subnav.scss
+++ b/ui/common/css/component/_subnav.scss
@@ -4,7 +4,7 @@
     white-space: nowrap;
   }
 
-  @include breakpoint($mq-subnav-top) {
+  @include mq-subnav-top {
     display: flex;
     flex-direction: row;
     overflow: hidden;
@@ -54,7 +54,7 @@
     }
   }
 
-  @include breakpoint($mq-subnav-side) {
+  @include mq-subnav-side {
     margin-top: 5px;
     z-index: z('subnav-side');
 
diff --git a/ui/common/css/component/_tabs-horiz.scss b/ui/common/css/component/_tabs-horiz.scss
index aa36363f8d1c..1941a5e3b35b 100644
--- a/ui/common/css/component/_tabs-horiz.scss
+++ b/ui/common/css/component/_tabs-horiz.scss
@@ -7,7 +7,7 @@ $c-tabs-active: $c-accent !default;
   align-items: flex-end;
   user-select: none;
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     font-size: 0.9em;
   }
 
@@ -28,7 +28,7 @@ $c-tabs-active: $c-accent !default;
     min-width: 15%;
     letter-spacing: -0.5px;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       letter-spacing: inherit;
     }
 
diff --git a/ui/common/css/form/_captcha.scss b/ui/common/css/form/_captcha.scss
index 2a9d8a3d1365..13026db5e1ca 100644
--- a/ui/common/css/form/_captcha.scss
+++ b/ui/common/css/form/_captcha.scss
@@ -3,7 +3,7 @@
 
   margin: 1em 0 0 -1em;
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     flex-wrap: nowrap;
   }
 
diff --git a/ui/common/css/form/_form3.scss b/ui/common/css/form/_form3.scss
index 7748143a63ca..68e73266b414 100644
--- a/ui/common/css/form/_form3.scss
+++ b/ui/common/css/form/_form3.scss
@@ -20,7 +20,7 @@
   flex: 1 1 31%;
 }
 
-@include breakpoint($mq-xx-small) {
+@media (min-width: at-least($xx-small)) {
   .form-half,
   .form-third {
     flex-grow: 0;
diff --git a/ui/common/css/header/_header.scss b/ui/common/css/header/_header.scss
index f15e1b84b3e4..b6f52970bf51 100644
--- a/ui/common/css/header/_header.scss
+++ b/ui/common/css/header/_header.scss
@@ -14,7 +14,7 @@
   user-select: none;
   --dropdown-top: 40px;
 
-  @include breakpoint($mq-site-header-tall) {
+  @include mq-site-header-tall {
     --dropdown-top: 60px;
   }
 }
@@ -41,7 +41,7 @@
     margin-left: 1rem;
     text-transform: uppercase;
     line-height: $site-header-height;
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       display: none;
     }
   }
diff --git a/ui/common/css/header/_title.scss b/ui/common/css/header/_title.scss
index 70c8e60b6ba7..80a85a612a6a 100644
--- a/ui/common/css/header/_title.scss
+++ b/ui/common/css/header/_title.scss
@@ -8,21 +8,21 @@
   margin: 0 0.5rem;
   display: none;
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     display: block;
   }
 
-  @include breakpoint($mq-topnav-hidden) {
+  @include mq-topnav-hidden {
     /* move away from hamburger */
     margin-#{$start-direction}: calc(0.5rem + #{$site-header-height});
   }
 
-  @include breakpoint($mq-site-header-tall) {
+  @include mq-site-header-tall {
     font-size: 30px;
     line-height: #{$site-header-tall-height - 3};
   }
 
-  @include breakpoint($mq-topnav-visible $mq-site-header-tall) {
+  @include mq-topnav-visible-and-tall {
     line-height: #{$site-header-tall-height - 5};
     margin: 0 1rem 0 1.5rem;
   }
diff --git a/ui/common/css/header/_topnav-hidden.scss b/ui/common/css/header/_topnav-hidden.scss
index 2620383bf9a5..0e4c879ffe8c 100644
--- a/ui/common/css/header/_topnav-hidden.scss
+++ b/ui/common/css/header/_topnav-hidden.scss
@@ -1,4 +1,4 @@
-@include breakpoint($mq-topnav-hidden) {
+@include mq-topnav-hidden {
   .topnav-toggle {
     display: block;
     position: absolute;
@@ -27,7 +27,7 @@
         border-radius: 3px;
         background-color: $c-font-dim;
 
-        @include breakpoint($mq-site-header-tall) {
+        @include mq-site-header-tall {
           width: 34px;
           height: 3px;
         }
@@ -36,7 +36,7 @@
       top: 50%;
       #{$start-direction}: 8.5px;
 
-      @include breakpoint($mq-site-header-tall) {
+      @include mq-site-header-tall {
         #{$start-direction}: 13px;
       }
 
@@ -50,7 +50,7 @@
       &::before {
         top: -6px;
 
-        @include breakpoint($mq-site-header-tall) {
+        @include mq-site-header-tall {
           top: -9px;
         }
 
@@ -62,7 +62,7 @@
       &::after {
         bottom: -7px;
 
-        @include breakpoint($mq-site-header-tall) {
+        @include mq-site-header-tall {
           bottom: -10px;
         }
 
@@ -119,7 +119,7 @@
     border-radius: 0 3px 0 0;
     max-width: 80%;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       max-width: 70%;
     }
 
diff --git a/ui/common/css/header/_topnav-visible.scss b/ui/common/css/header/_topnav-visible.scss
index 84ad34500bd4..16bdb280e59b 100644
--- a/ui/common/css/header/_topnav-visible.scss
+++ b/ui/common/css/header/_topnav-visible.scss
@@ -1,4 +1,4 @@
-@include breakpoint($mq-topnav-visible) {
+@include mq-topnav-visible {
   .hbg,
   .site-title-nav .fullscreen-mask,
   .topnav-toggle {
@@ -9,7 +9,7 @@
     --nav-section: 26px;
     --nav-section-hover: 35px;
 
-    @include breakpoint($mq-site-header-tall) {
+    @include mq-site-header-tall {
       --nav-section: 48px;
       --nav-section-hover: 53px;
     }
diff --git a/ui/common/css/layout/_base.scss b/ui/common/css/layout/_base.scss
index 102cc1e5060b..30e9f42ec08b 100644
--- a/ui/common/css/layout/_base.scss
+++ b/ui/common/css/layout/_base.scss
@@ -4,7 +4,7 @@ $vp-max-width: 1200px;
 body {
   --site-header-height: #{$site-header-short-height};
 
-  @include breakpoint($mq-site-header-tall) {
+  @include mq-site-header-tall {
     --site-header-height: #{$site-header-tall-height};
   }
 
@@ -16,7 +16,7 @@ body {
 
   --main-margin: 0;
 
-  @include breakpoint($mq-main-margin) {
+  @media (min-width: at-least($small)) {
     --main-margin: 1vw;
     margin-bottom: $block-gap;
   }
diff --git a/ui/common/css/layout/_page-menu.scss b/ui/common/css/layout/_page-menu.scss
index a5cd9bef2a7c..2eabf93af79f 100644
--- a/ui/common/css/layout/_page-menu.scss
+++ b/ui/common/css/layout/_page-menu.scss
@@ -4,7 +4,7 @@
   display: grid;
   grid-template-areas: 'menu' 'content';
 
-  @include breakpoint($mq-subnav-side) {
+  @include mq-subnav-side {
     grid-template-columns: max-content auto;
     grid-template-rows: min-content;
     grid-template-areas: 'menu content';
diff --git a/ui/common/css/layout/_uniboard.scss b/ui/common/css/layout/_uniboard.scss
index 649183d69071..837e83a75eb3 100644
--- a/ui/common/css/layout/_uniboard.scss
+++ b/ui/common/css/layout/_uniboard.scss
@@ -1,7 +1,7 @@
 body {
   --board-scale: 1;
 
-  @include breakpoint($mq-zoom-enabled) {
+  @include mq-zoom-enabled {
     // --zoom: 80; defined in the HTML, loaded from server
     --board-scale: calc((var(--zoom) / 100) * 0.75 + 0.25);
   }
@@ -16,7 +16,7 @@ body {
   }
 }
 
-@include breakpoint($mq-col1-uniboard) {
+@include mq-is-col1 {
   body {
     --col1: 1;
   }
diff --git a/ui/common/css/vendor/chessground/_board-3d.scss b/ui/common/css/vendor/chessground/_board-3d.scss
index f5ae68f6ecdb..003f5f3d1258 100644
--- a/ui/common/css/vendor/chessground/_board-3d.scss
+++ b/ui/common/css/vendor/chessground/_board-3d.scss
@@ -5,7 +5,7 @@ $td-outer-height-percent: $td-outer-height-ratio * 100%;
 $td-inner-height-ratio: 464.5 / 512;
 $td-inner-relative-percent: $td-inner-height-ratio / $td-outer-height-ratio * 100%;
 
-@include breakpoint($mq-col1-uniboard) {
+@include mq-is-col1 {
   .is3d {
     /* horiz scroll caused by 3d pieces overflowing the board */
     overflow-x: clip;
@@ -132,7 +132,7 @@ $piece-files: (
 .board-resize {
   $resize-width: 20px;
 
-  @include breakpoint($mq-col2-uniboard) {
+  @include mq-at-least-col2 {
     bottom: #{28px - $resize-width} !important;
   }
 }
diff --git a/ui/common/css/vendor/chessground/_coords.scss b/ui/common/css/vendor/chessground/_coords.scss
index 4e164fde9961..690c3aeb20ad 100644
--- a/ui/common/css/vendor/chessground/_coords.scss
+++ b/ui/common/css/vendor/chessground/_coords.scss
@@ -1,7 +1,7 @@
 @import 'coords-in';
 
 /* handle outer coords */
-@include breakpoint($mq-col2-uniboard) {
+@include mq-at-least-col2 {
   .coords-out coords {
     text-shadow: none;
 
diff --git a/ui/coordinateTrainer/css/_coordinateTrainer.scss b/ui/coordinateTrainer/css/_coordinateTrainer.scss
index 0c35050203c5..45500a8012e1 100644
--- a/ui/coordinateTrainer/css/_coordinateTrainer.scss
+++ b/ui/coordinateTrainer/css/_coordinateTrainer.scss
@@ -161,7 +161,8 @@
     grid-template-columns: 1fr 1fr;
     grid-template-areas: 'buttons buttons' 'voice voice' 'keyboard keyboard';
     grid-row-gap: 1vh;
-    @include breakpoint($mq-x-small) {
+
+    @media (min-width: at-least($x-small)) {
       grid-template-areas: 'keyboard voice' 'buttons buttons';
     }
   }
diff --git a/ui/coordinateTrainer/css/_layout.scss b/ui/coordinateTrainer/css/_layout.scss
index 9ca3d953dddd..9cf620f7379b 100644
--- a/ui/coordinateTrainer/css/_layout.scss
+++ b/ui/coordinateTrainer/css/_layout.scss
@@ -1,11 +1,25 @@
-$mq-col1: $mq-not-medium;
-$mq-col2: $mq-medium;
-$mq-col3: $mq-x-large;
+@mixin mq-is-col1 {
+  @media (max-width: at-most($medium)) {
+    @content;
+  }
+}
+
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($medium)) {
+    @content;
+  }
+}
+
+@mixin mq-at-least-col3 {
+  @media (min-width: at-least($x-large)) {
+    @content;
+  }
+}
 
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height});
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --main-max-width: auto;
   }
 }
@@ -43,7 +57,7 @@ $mq-col3: $mq-x-large;
   grid-template-areas: 'board' 'progress' 'co-input' 'table' 'side';
   grid-row-gap: $block-gap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: var(--col2-uniboard-width) $block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -54,7 +68,7 @@ $mq-col3: $mq-x-large;
       '.        . side';
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-areas:
       'side . board    . table'
       'side . progress . .'
@@ -64,14 +78,14 @@ $mq-col3: $mq-x-large;
   }
 }
 
-@include breakpoint($mq-col1) {
+@include mq-is-col1 {
   .explanation {
     order: 2;
     margin: 2em 1em 0 1em;
   }
 }
 
-@include breakpoint($mq-col3) {
+@include mq-at-least-col3 {
   .box:first-child {
     margin-top: $block-gap;
   }
diff --git a/ui/dasher/css/_dasher.scss b/ui/dasher/css/_dasher.scss
index 7b90dc7ef246..23c68cf4178b 100644
--- a/ui/dasher/css/_dasher.scss
+++ b/ui/dasher/css/_dasher.scss
@@ -195,7 +195,7 @@
   .board .zoom {
     display: none;
 
-    @include breakpoint($mq-board-resizable) {
+    @include mq-board-resizable {
       display: block;
     }
 
@@ -227,7 +227,7 @@
     #images-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      @include breakpoint($mq-x-small) {
+      @media (min-width: at-least($x-small)) {
         grid-template-columns: repeat(4, 1fr);
       }
       background-attachment: scroll;
diff --git a/ui/editor/css/_layout.scss b/ui/editor/css/_layout.scss
index c94d97249115..cea2de55457b 100644
--- a/ui/editor/css/_layout.scss
+++ b/ui/editor/css/_layout.scss
@@ -9,7 +9,7 @@
   grid-template-columns: minmax(0, $board-width);
   grid-template-areas: 'spare-top' 'board' 'spare-bottom' 'tools' 'copyables';
 
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     grid-template-columns: minmax(30vmin, $board-width) 2vmin minmax(200px, 300px);
     grid-template-rows: min-content auto min-content;
     grid-template-areas: '.            . tools' 'spare-top    . tools' 'board        . tools' 'spare-bottom . tools' '.            . tools' 'copyables    . .    ';
diff --git a/ui/game/css/_row.scss b/ui/game/css/_row.scss
index 410ea7039b60..e4f53a9c7b15 100644
--- a/ui/game/css/_row.scss
+++ b/ui/game/css/_row.scss
@@ -24,7 +24,7 @@
     flex: 0 0 16rem;
     margin-#{$end-direction}: 1em;
 
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       display: none;
     }
   }
diff --git a/ui/insight/css/_filters.scss b/ui/insight/css/_filters.scss
index 2ef7cac5d230..38a309536927 100644
--- a/ui/insight/css/_filters.scss
+++ b/ui/insight/css/_filters.scss
@@ -44,7 +44,7 @@
 
     span {
       text-align: right;
-      @include breakpoint($mq-not-x-small) {
+      @media (max-width: at-most($x-small)) {
         text-align: left;
       }
       line-height: 30px;
@@ -63,7 +63,7 @@
 
   .ms-drop {
     margin-#{$start-direction}: 99%;
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       margin-#{$start-direction}: 50%;
     }
     top: 0;
diff --git a/ui/insight/css/_insight.scss b/ui/insight/css/_insight.scss
index 153474d4d1f9..a93649dff10f 100644
--- a/ui/insight/css/_insight.scss
+++ b/ui/insight/css/_insight.scss
@@ -170,14 +170,14 @@
 
   .axis-form .by {
     margin: 0 8px;
-    @include breakpoint($mq-less-than-400) {
+    @media (max-width: at-most(400px)) {
       display: none;
     }
   }
 
   .axis-form .ms-choice {
     padding: calc(var(--header-height) / 2) 10px;
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       padding-left: 2px;
       padding-right: 2px;
     }
diff --git a/ui/learn/css/_layout.scss b/ui/learn/css/_layout.scss
index 4d515a6826c6..641ed4612921 100644
--- a/ui/learn/css/_layout.scss
+++ b/ui/learn/css/_layout.scss
@@ -1,10 +1,7 @@
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height} - 10rem);
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --main-max-width: auto;
   }
 }
@@ -35,7 +32,7 @@ $mq-col3: $mq-col3-uniboard;
 
   grid-gap: $block-gap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     &--run {
       grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
       grid-template-rows: fit-content(0);
@@ -46,13 +43,13 @@ $mq-col3: $mq-col3-uniboard;
       grid-template-areas: 'side main';
       grid-template-columns: 240px auto;
 
-      @include breakpoint($mq-x-large) {
+      @media (min-width: at-least($x-large)) {
         grid-template-columns: 240px 960px;
       }
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     &--run {
       grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
       grid-template-areas: 'side main table';
diff --git a/ui/learn/css/_map.scss b/ui/learn/css/_map.scss
index 84c03a0e9e0d..ebff86665872 100644
--- a/ui/learn/css/_map.scss
+++ b/ui/learn/css/_map.scss
@@ -15,7 +15,7 @@
   .categ_stages {
     --min-width: 100vw;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       --min-width: 400px;
     }
 
diff --git a/ui/lobby/css/_defs.scss b/ui/lobby/css/_defs.scss
index 02fb220e51b9..9317751e6e5a 100644
--- a/ui/lobby/css/_defs.scss
+++ b/ui/lobby/css/_defs.scss
@@ -1,15 +1,29 @@
-$mq-col2: $mq-xx-small;
-$mq-col3: $mq-small;
-$mq-col4: $mq-x-large;
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($xx-small)) {
+    @content;
+  }
+}
+
+@mixin mq-at-least-col3 {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
+
+@mixin mq-at-least-col4 {
+  @media (min-width: at-least($x-large)) {
+    @content;
+  }
+}
 
 @mixin lobby-app-size {
   min-height: 300px;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     min-height: 400px;
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     height: 600px;
     max-height: calc(100vh - #{$site-header-outer-height} - #{$block-gap});
   }
diff --git a/ui/lobby/css/_layout.scss b/ui/lobby/css/_layout.scss
index ded5a11c83b1..f1611e341212 100644
--- a/ui/lobby/css/_layout.scss
+++ b/ui/lobby/css/_layout.scss
@@ -17,7 +17,7 @@
     min-height: 20em;
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --cols: 2; // ui/lobby/src/main.ts
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: auto repeat(4, fit-content(0)) 20em;
@@ -40,7 +40,7 @@
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     --cols: 3; // ui/lobby/src/main.ts
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 12em repeat(2, fit-content(0)) auto fit-content(15em) repeat(2, fit-content(0)) minmax(
@@ -74,7 +74,7 @@
     }
   }
 
-  @include breakpoint($mq-col4) {
+  @include mq-at-least-col4 {
     --cols: 4; // ui/lobby/src/main.ts
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, fit-content(0)) auto repeat(6, fit-content(0));
diff --git a/ui/lobby/css/app/_app.scss b/ui/lobby/css/app/_app.scss
index 8bc5d3d450b6..8867b841f75b 100644
--- a/ui/lobby/css/app/_app.scss
+++ b/ui/lobby/css/app/_app.scss
@@ -77,7 +77,7 @@
   }
 }
 
-@include breakpoint($mq-not-xx-small) {
+@media (max-width: at-most($xx-small)) {
   .lreal_time,
   .lseeks .hooks__list {
     font-size: 0.9em;
diff --git a/ui/lobby/css/app/_hook-filters.scss b/ui/lobby/css/app/_hook-filters.scss
index 54a7a76682f8..23570f2f8dd8 100644
--- a/ui/lobby/css/app/_hook-filters.scss
+++ b/ui/lobby/css/app/_hook-filters.scss
@@ -62,7 +62,7 @@
     input {
       padding: 0.6em 0;
       margin: 0 1ch;
-      @include breakpoint($mq-not-xx-small) {
+      @media (max-width: at-most($xx-small)) {
         width: 26vw;
       }
     }
@@ -77,7 +77,7 @@
     }
   }
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     padding: $block-gap 1em;
 
     td {
diff --git a/ui/lobby/css/app/_hook-list.scss b/ui/lobby/css/app/_hook-list.scss
index 589643313053..a49126d33811 100644
--- a/ui/lobby/css/app/_hook-list.scss
+++ b/ui/lobby/css/app/_hook-list.scss
@@ -59,7 +59,7 @@
       width: 110px;
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       padding: 1em 0.4em;
 
       &:nth-child(3) {
@@ -97,7 +97,7 @@
       opacity: 0.6;
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       padding: 0.5em 0.4em;
 
       &:first-child {
diff --git a/ui/msg/css/_convo.scss b/ui/msg/css/_convo.scss
index c59f1441d467..1c1f39b59ab5 100644
--- a/ui/msg/css/_convo.scss
+++ b/ui/msg/css/_convo.scss
@@ -6,7 +6,7 @@
 
     flex: 1 1 100%;
 
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       flex: 1 0 100%;
       display: none;
 
@@ -36,7 +36,7 @@
         padding: 0 1em;
         font-size: 1.5em;
 
-        @include breakpoint($mq-small) {
+        @media (min-width: at-least($small)) {
           display: none;
         }
       }
@@ -120,7 +120,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       &__head__back {
         padding: 0 0.5em;
       }
diff --git a/ui/msg/css/_msg.scss b/ui/msg/css/_msg.scss
index c6f81a20b380..4a8039b9be62 100644
--- a/ui/msg/css/_msg.scss
+++ b/ui/msg/css/_msg.scss
@@ -23,7 +23,7 @@ body {
   flex-flow: row nowrap;
   height: calc(var(--app-height) - var(--site-header-height));
 
-  @include breakpoint($mq-main-margin) {
+  @media (min-width: at-least($small)) {
     height: calc(var(--app-height) * 0.98 - var(--site-header-height));
   }
 
diff --git a/ui/msg/css/_side.scss b/ui/msg/css/_side.scss
index 68bf3dc7e978..6b7df6997e3a 100644
--- a/ui/msg/css/_side.scss
+++ b/ui/msg/css/_side.scss
@@ -4,11 +4,11 @@
 
     flex: 0 0 50ch;
 
-    @include breakpoint($mq-not-medium) {
+    @media (max-width: at-most($medium)) {
       flex: 0 0 40ch;
     }
 
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       flex: 1 0 100%;
       display: none;
 
diff --git a/ui/opening/css/_config.scss b/ui/opening/css/_config.scss
index 5bc6999cca38..8efc9487608a 100644
--- a/ui/opening/css/_config.scss
+++ b/ui/opening/css/_config.scss
@@ -1,5 +1,10 @@
 $c-opcfg: $c-accent;
-$op-details-large: $mq-small;
+
+@mixin mq-details-large {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
 
 .opening__config {
   @extend %box-neat;
@@ -7,10 +12,10 @@ $op-details-large: $mq-small;
   &[open] {
     flex: 1 0 auto;
   }
-  @include breakpoint($op-col-one) {
+  @include mq-col-one {
     display: none;
   }
-  @include breakpoint($op-details-large) {
+  @include mq-details-large {
     flex: 1 0 auto;
   }
   background: $c-bg-zebra;
@@ -31,13 +36,13 @@ $op-details-large: $mq-small;
       .opening__config[open] & {
         display: inline-block;
       }
-      @include breakpoint($op-details-large) {
+      @include mq-details-large {
         display: inline-block;
       }
     }
     &__short {
       display: inline-block;
-      @include breakpoint($op-details-large) {
+      @include mq-details-large {
         display: none;
       }
       .opening__config[open] & {
diff --git a/ui/opening/css/_panels.scss b/ui/opening/css/_panels.scss
index c481bee9137e..02abbc0c30b1 100644
--- a/ui/opening/css/_panels.scss
+++ b/ui/opening/css/_panels.scss
@@ -7,7 +7,7 @@ $c-op-panels: $c-brag;
     &__tab {
       @extend %button-none, %box-radius;
       color: $c-op-panels;
-      @include breakpoint($op-col-many) {
+      @include mq-col-many {
         font-size: 1.3em;
       }
       padding: 0.4em 1em;
diff --git a/ui/opening/css/_search.scss b/ui/opening/css/_search.scss
index 76f2aaa341bb..086ab48c58b4 100644
--- a/ui/opening/css/_search.scss
+++ b/ui/opening/css/_search.scss
@@ -17,7 +17,7 @@
         // height: $top-height;
         font-size: 1.1em;
 
-        @include breakpoint($mq-xx-small) {
+        @media (min-width: at-least($xx-small)) {
           font-size: 1.2em;
         }
       }
diff --git a/ui/opening/css/_show.scss b/ui/opening/css/_show.scss
index 8055229cf054..7a12a3e7618a 100644
--- a/ui/opening/css/_show.scss
+++ b/ui/opening/css/_show.scss
@@ -1,5 +1,13 @@
-$op-col-many: $mq-x-small;
-$op-col-one: $mq-not-x-small;
+@mixin mq-col-many {
+  @media (min-width: at-least($x-small)) {
+    @content;
+  }
+}
+@mixin mq-col-one {
+  @media (max-width: at-most($x-small)) {
+    @content;
+  }
+}
 .opening {
   &__title {
     flex-flow: row nowrap !important;
@@ -19,7 +27,7 @@ $op-col-one: $mq-not-x-small;
     display: flex;
     flex-flow: column;
     align-items: stretch;
-    @include breakpoint($op-col-many) {
+    @include mq-col-many {
       flex-flow: row;
       align-items: flex-start;
     }
@@ -27,7 +35,7 @@ $op-col-one: $mq-not-x-small;
     margin-bottom: 3em;
     &__result-lpv {
       flex: 0 0 100%;
-      @include breakpoint($op-col-many) {
+      @include mq-col-many {
         flex: 0 0 calc(300px + #{$result-width});
       }
       display: flex;
@@ -40,7 +48,7 @@ $op-col-one: $mq-not-x-small;
     }
     .lpv {
       flex: 0 0 calc(100% - #{$result-width});
-      @include breakpoint($op-col-many) {
+      @include mq-col-many {
         flex: 0 0 300px;
       }
     }
@@ -57,7 +65,8 @@ $op-col-one: $mq-not-x-small;
     flex: 0 0 $op-chart-height;
     display: flex;
     flex-flow: column;
-    @include breakpoint($mq-small) {
+
+    @media (min-width: at-least($small)) {
       flex-flow: row nowrap;
     }
     align-items: stretch;
@@ -75,7 +84,8 @@ $op-col-one: $mq-not-x-small;
   &__actions {
     display: flex;
     flex-flow: row;
-    @include breakpoint($mq-small) {
+
+    @media (min-width: at-least($small)) {
       flex: 0 0 auto;
       flex-flow: column;
       order: 1;
diff --git a/ui/opening/css/_wiki.scss b/ui/opening/css/_wiki.scss
index eb806f4c72a6..9a26e3b46a9d 100644
--- a/ui/opening/css/_wiki.scss
+++ b/ui/opening/css/_wiki.scss
@@ -4,7 +4,7 @@
   flex: 2 1 auto;
   &__markup {
     max-height: 220px;
-    @include breakpoint($mq-small) {
+    @media (min-width: at-least($small)) {
       max-height: 300px;
     }
     overflow-y: auto;
diff --git a/ui/package.json b/ui/package.json
index 25a3ce8a6cf0..279c12549bac 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,7 +9,6 @@
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "breakpoint-sass": "^3.0.0",
     "@types/jest": "^29.5.3",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2"
diff --git a/ui/pagelets/css/_account.scss b/ui/pagelets/css/_account.scss
index e671b35870ea..a28548398ae7 100644
--- a/ui/pagelets/css/_account.scss
+++ b/ui/pagelets/css/_account.scss
@@ -138,7 +138,7 @@
 }
 
 .account {
-  @include breakpoint($mq-subnav-side) {
+  @include mq-subnav-side {
     min-height: 100%;
   }
 
@@ -159,7 +159,7 @@
     margin-bottom: 1.3rem;
     font-size: 1.3em;
 
-    @include breakpoint($mq-x-small) {
+    @media (min-width: at-least($x-small)) {
       overflow: hidden;
       white-space: nowrap;
 
@@ -243,7 +243,7 @@
     @extend %active-soft;
   }
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     td.icon {
       display: none;
     }
diff --git a/ui/pagelets/css/_auth.scss b/ui/pagelets/css/_auth.scss
index a7c7e370bbff..3f0d0284ee3c 100644
--- a/ui/pagelets/css/_auth.scss
+++ b/ui/pagelets/css/_auth.scss
@@ -6,7 +6,7 @@
   width: 100%;
   margin: auto;
 
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     width: 40em;
   }
 
@@ -24,7 +24,7 @@
   }
 
   &-login {
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       width: 30em;
     }
 
@@ -51,7 +51,7 @@
 }
 
 /* presumably the keyboard is up */
-@include breakpoint($mq-not-x-short) {
+@media (max-width: at-most($x-short)) {
   #top {
     display: none;
   }
diff --git a/ui/pagelets/css/_clas.scss b/ui/pagelets/css/_clas.scss
index 9e3e92187007..b8af9e41ca4b 100644
--- a/ui/pagelets/css/_clas.scss
+++ b/ui/pagelets/css/_clas.scss
@@ -17,7 +17,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   white-space: normal;
   max-width: 22vw;
 
-  @include breakpoint($mq-medium) {
+  @include mq-topnav-visible {
     max-width: 15vw;
   }
 
@@ -36,7 +36,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
       display: none;
     }
 
-    @include breakpoint($mq-subnav-side) {
+    @include mq-subnav-side {
       font-weight: bold;
       padding: 0.4rem 2vw 0.4rem 0.8rem;
 
@@ -88,7 +88,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
         margin-#{$end-direction}: 0.4em;
 
         @include transition;
-        @include breakpoint($mq-not-xx-small) {
+        @media (max-width: at-most($xx-small)) {
           display: none;
         }
       }
@@ -220,7 +220,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
     justify-content: center;
     align-items: flex-end;
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       font-size: 0.9em;
     }
 
diff --git a/ui/pagelets/css/_diagnosticDialog.scss b/ui/pagelets/css/_diagnosticDialog.scss
index 5fa2089ea420..ee36d5f75e0e 100644
--- a/ui/pagelets/css/_diagnosticDialog.scss
+++ b/ui/pagelets/css/_diagnosticDialog.scss
@@ -7,11 +7,11 @@
   max-height: 96vh;
   max-width: 72vw;
 
-  @media (max-width: $mq-width-medium) {
+  @media (max-width: $medium) {
     max-width: 84vw;
   }
 
-  @media (max-width: $mq-width-xx-small) {
+  @media (max-width: $xx-small) {
     max-width: unset;
     width: 96vw;
   }
diff --git a/ui/pagelets/css/_feature.scss b/ui/pagelets/css/_feature.scss
index 2d16c90020f0..3be6fcb17d62 100644
--- a/ui/pagelets/css/_feature.scss
+++ b/ui/pagelets/css/_feature.scss
@@ -75,7 +75,7 @@
     text-transform: none;
   }
 
-  @include breakpoint($mq-not-small) {
+  @media (max-width: at-most($small)) {
     .is {
       font-size: 0;
 
diff --git a/ui/pagelets/css/_fide.scss b/ui/pagelets/css/_fide.scss
index feaf046f5a03..dad366d1cb04 100644
--- a/ui/pagelets/css/_fide.scss
+++ b/ui/pagelets/css/_fide.scss
@@ -17,7 +17,7 @@
         // height: $top-height;
         font-size: 1.1em;
 
-        @include breakpoint($mq-xx-small) {
+        @media (min-width: at-least($xx-small)) {
           font-size: 1.2em;
         }
       }
@@ -37,7 +37,7 @@
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   grid-gap: 1em;
   font-size: 1.5em;
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
     font-size: 1.8em;
   }
diff --git a/ui/pagelets/css/_lag.scss b/ui/pagelets/css/_lag.scss
index d9575cad31de..1ac73791ea80 100644
--- a/ui/pagelets/css/_lag.scss
+++ b/ui/pagelets/css/_lag.scss
@@ -25,7 +25,7 @@
     width: 300px;
     height: 300px;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       width: 350px;
       height: 350px;
     }
diff --git a/ui/pagelets/css/_not-found.scss b/ui/pagelets/css/_not-found.scss
index b9aa131ab7cd..85c903299130 100644
--- a/ui/pagelets/css/_not-found.scss
+++ b/ui/pagelets/css/_not-found.scss
@@ -34,7 +34,7 @@
     display: none;
 
     @media (hover: hover) {
-      @include breakpoint($mq-small) {
+      @media (min-width: at-least($small)) {
         display: block;
       }
     }
diff --git a/ui/pagelets/css/_oauth.scss b/ui/pagelets/css/_oauth.scss
index 14ea1bbfd18a..9074af668c48 100644
--- a/ui/pagelets/css/_oauth.scss
+++ b/ui/pagelets/css/_oauth.scss
@@ -2,7 +2,7 @@
   width: 100%;
   margin: auto;
 
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     width: 40em;
   }
 
diff --git a/ui/pagelets/css/_plan.scss b/ui/pagelets/css/_plan.scss
index 8b3173fec0f0..6d687e9e05b1 100644
--- a/ui/pagelets/css/_plan.scss
+++ b/ui/pagelets/css/_plan.scss
@@ -273,7 +273,7 @@
   .recent-patrons {
     display: none;
 
-    @include breakpoint($mq-medium) {
+    @include mq-topnav-visible {
       display: block;
     }
 
diff --git a/ui/pagelets/css/_relation.scss b/ui/pagelets/css/_relation.scss
index b63738929b63..5fc35377b1d1 100644
--- a/ui/pagelets/css/_relation.scss
+++ b/ui/pagelets/css/_relation.scss
@@ -3,7 +3,7 @@ table td {
 
   max-width: 50vw;
 
-  @include breakpoint($mq-x-small) {
+  @media (min-width: at-least($x-small)) {
     &:nth-child(1) {
       width: 30%;
     }
@@ -15,7 +15,7 @@ table td {
     }
   }
 
-  @include breakpoint($mq-not-x-small) {
+  @media (max-width: at-most($x-small)) {
     &:last-child {
       display: none;
     }
diff --git a/ui/pagelets/css/_search.scss b/ui/pagelets/css/_search.scss
index 31f4bdd79f3c..7579ad239063 100644
--- a/ui/pagelets/css/_search.scss
+++ b/ui/pagelets/css/_search.scss
@@ -109,7 +109,7 @@
         flex-direction: row;
         margin: 0.3rem 0;
 
-        @include breakpoint($mq-x-small) {
+        @media (min-width: at-least($x-small)) {
           width: 50%;
         }
       }
diff --git a/ui/pagelets/css/_source.scss b/ui/pagelets/css/_source.scss
index 841c1648cafe..9611cba30e44 100644
--- a/ui/pagelets/css/_source.scss
+++ b/ui/pagelets/css/_source.scss
@@ -1,4 +1,4 @@
-@include breakpoint($mq-not-x-small) {
+@media (max-width: at-most($x-small)) {
   #jslicense-labels1 {
     max-width: 100vw;
     display: block;
diff --git a/ui/pagelets/css/_video.scss b/ui/pagelets/css/_video.scss
index 51a7ca7eeafa..5d291708fbfc 100644
--- a/ui/pagelets/css/_video.scss
+++ b/ui/pagelets/css/_video.scss
@@ -184,7 +184,7 @@
         color: $c-font-dim;
         margin-left: 1em;
 
-        @include breakpoint($mq-subnav-top) {
+        @include mq-subnav-top {
           display: none;
         }
       }
@@ -207,7 +207,7 @@
           content: '-';
         }
 
-        @include breakpoint($mq-subnav-top) {
+        @include mq-subnav-top {
           background: $c-accent;
           color: $c-accent-over;
         }
diff --git a/ui/pagelets/css/build/_lpv.embed.scss b/ui/pagelets/css/build/_lpv.embed.scss
index be0b1ed59762..a4c62bde9109 100644
--- a/ui/pagelets/css/build/_lpv.embed.scss
+++ b/ui/pagelets/css/build/_lpv.embed.scss
@@ -1,5 +1,3 @@
-@import '../../../node_modules/breakpoint-sass/stylesheets/breakpoint';
-
 @import '../../../common/css/abstract/all';
 @import '../../../common/css/base/fonts';
 @import '../../../common/css/base/typography';
diff --git a/ui/pagelets/css/coach/_layout.scss b/ui/pagelets/css/coach/_layout.scss
index 3905dc11beff..c416376c1e5d 100644
--- a/ui/pagelets/css/coach/_layout.scss
+++ b/ui/pagelets/css/coach/_layout.scss
@@ -1,5 +1,8 @@
-$mq-picture: $mq-small;
-$mq-coach-col2: $mq-large;
+@mixin mq-at-least-picture {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
 
 main {
   .coach-main {
@@ -15,7 +18,7 @@ main {
     display: grid;
     grid-template-areas: 'main' 'side';
 
-    @include breakpoint($mq-coach-col2) {
+    @media (min-width: at-least($large)) {
       grid-template-columns: 300px auto;
       grid-template-areas: 'side main';
       grid-gap: 2rem;
diff --git a/ui/pagelets/css/coach/_list.scss b/ui/pagelets/css/coach/_list.scss
index d82f3e482d08..4e0e400cc304 100644
--- a/ui/pagelets/css/coach/_list.scss
+++ b/ui/pagelets/css/coach/_list.scss
@@ -47,7 +47,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       .rating {
         display: none;
       }
diff --git a/ui/pagelets/css/coach/_show.scss b/ui/pagelets/css/coach/_show.scss
index 10665973eb75..2ce6574e6731 100644
--- a/ui/pagelets/css/coach/_show.scss
+++ b/ui/pagelets/css/coach/_show.scss
@@ -35,7 +35,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       grid-template-columns: auto;
     }
   }
diff --git a/ui/pagelets/css/coach/_widget.scss b/ui/pagelets/css/coach/_widget.scss
index 2a29c00d04d7..2d44720b9489 100644
--- a/ui/pagelets/css/coach/_widget.scss
+++ b/ui/pagelets/css/coach/_widget.scss
@@ -4,7 +4,7 @@
   padding-bottom: 1rem;
 
   @include transition;
-  @include breakpoint($mq-picture) {
+  @include mq-at-least-picture {
     height: 300px;
   }
 
@@ -15,7 +15,7 @@
   .picture {
     display: none;
 
-    @include breakpoint($mq-picture) {
+    @include mq-at-least-picture {
       display: block;
     }
   }
diff --git a/ui/pagelets/css/forum/_post.scss b/ui/pagelets/css/forum/_post.scss
index 18f3b2908820..7c618304c3ce 100644
--- a/ui/pagelets/css/forum/_post.scss
+++ b/ui/pagelets/css/forum/_post.scss
@@ -65,7 +65,7 @@
       overflow: hidden;
       display: none;
 
-      @include breakpoint($mq-small) {
+      @media (min-width: at-least($small)) {
         display: block;
       }
     }
diff --git a/ui/pagelets/css/forum/_table.scss b/ui/pagelets/css/forum/_table.scss
index 38cbfe826e7c..9ca1d0223b52 100644
--- a/ui/pagelets/css/forum/_table.scss
+++ b/ui/pagelets/css/forum/_table.scss
@@ -8,7 +8,7 @@
   & th.right {
     display: none;
 
-    @include breakpoint($mq-small) {
+    @media (min-width: at-least($small)) {
       display: table-cell;
       text-align: right;
       padding-#{$end-direction}: 2em;
@@ -26,7 +26,7 @@
 
     display: none;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       display: table-cell;
     }
   }
@@ -34,7 +34,7 @@
   thead {
     display: none;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       display: table-header-group;
     }
   }
diff --git a/ui/pagelets/css/practice/_app.scss b/ui/pagelets/css/practice/_app.scss
index ab470ceea187..72648dca6468 100644
--- a/ui/pagelets/css/practice/_app.scss
+++ b/ui/pagelets/css/practice/_app.scss
@@ -14,7 +14,7 @@
   .studies {
     --min-width: 100vw;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       --min-width: 400px;
     }
 
@@ -38,7 +38,7 @@
     font-size: 1.2em;
     overflow-x: hidden;
 
-    @include breakpoint($mq-main-margin) {
+    @media (min-width: at-least($small)) {
       overflow-x: visible;
 
       /* ribbon */
diff --git a/ui/pagelets/css/practice/_index.scss b/ui/pagelets/css/practice/_index.scss
index 4505d09b5e42..7d048bd612f8 100644
--- a/ui/pagelets/css/practice/_index.scss
+++ b/ui/pagelets/css/practice/_index.scss
@@ -5,7 +5,7 @@
 .page-menu__menu {
   margin: 0 0 #{2 * $block-gap} 0;
 
-  @include breakpoint($mq-subnav-side) {
+  @include mq-subnav-side {
     margin: 0 #{2 * $block-gap} 0 0;
   }
 }
diff --git a/ui/pagelets/css/streamer/_form.scss b/ui/pagelets/css/streamer/_form.scss
index c5ae03ed67ce..a08a44c41a75 100644
--- a/ui/pagelets/css/streamer/_form.scss
+++ b/ui/pagelets/css/streamer/_form.scss
@@ -1,4 +1,8 @@
-$mq-picture: $mq-large;
+@mixin mq-at-least-picture {
+  @media (min-width: at-least($large)) {
+    @content;
+  }
+}
 
 @import 'header';
 
@@ -7,7 +11,7 @@ $mq-picture: $mq-large;
     flex-direction: column;
     padding: 2em 2em 0;
     row-gap: 2em;
-    @include breakpoint($mq-picture) {
+    @include mq-at-least-picture {
       flex-direction: row;
     }
 
diff --git a/ui/pagelets/css/streamer/_header.scss b/ui/pagelets/css/streamer/_header.scss
index 7f293e6be541..5dc7f2792cef 100644
--- a/ui/pagelets/css/streamer/_header.scss
+++ b/ui/pagelets/css/streamer/_header.scss
@@ -89,7 +89,7 @@
   top: -10px;
   right: -10px;
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     transform: scale(0.7);
     transform-origin: top right;
   }
@@ -141,7 +141,7 @@
 .live .streamer-lang {
   margin-right: 100px;
 
-  @include breakpoint($mq-not-xx-small) {
+  @media (max-width: at-most($xx-small)) {
     margin-right: 50px;
   }
 }
diff --git a/ui/pagelets/css/streamer/_list.scss b/ui/pagelets/css/streamer/_list.scss
index 4586e1e9296d..73bd87650c5b 100644
--- a/ui/pagelets/css/streamer/_list.scss
+++ b/ui/pagelets/css/streamer/_list.scss
@@ -1,13 +1,17 @@
-$mq-picture: $mq-medium;
-
 @import 'header';
 
+@mixin mq-at-least-picture {
+  @media (min-width: at-least($medium)) {
+    @content;
+  }
+}
+
 .streamer-list {
   h1 {
     &::before {
       display: none;
 
-      @include breakpoint($mq-picture) {
+      @include mq-at-least-picture {
         display: inline;
       }
     }
@@ -19,7 +23,7 @@ $mq-picture: $mq-medium;
     display: flex;
 
     @include transition;
-    @include breakpoint($mq-subnav-top) {
+    @include mq-subnav-top {
       overflow-x: hidden;
     }
 
@@ -34,7 +38,7 @@ $mq-picture: $mq-medium;
         display: inline;
         margin-#{$end-direction}: 0.2em;
 
-        @include breakpoint($mq-picture) {
+        @include mq-at-least-picture {
           display: none;
         }
       }
@@ -62,7 +66,7 @@ $mq-picture: $mq-medium;
 
     display: none;
 
-    @include breakpoint($mq-picture) {
+    @include mq-at-least-picture {
       display: block;
     }
   }
@@ -92,7 +96,7 @@ $mq-picture: $mq-medium;
     margin: 5px 0 10px 0;
     display: none;
 
-    @include breakpoint($mq-large) {
+    @media (min-width: at-least($large)) {
       display: block;
     }
   }
diff --git a/ui/pagelets/css/streamer/_show.scss b/ui/pagelets/css/streamer/_show.scss
index b4f940732608..d935ebbdce0e 100644
--- a/ui/pagelets/css/streamer/_show.scss
+++ b/ui/pagelets/css/streamer/_show.scss
@@ -1,7 +1,11 @@
-$mq-picture: $mq-large;
-
 @import 'header';
 
+@mixin mq-at-least-picture {
+  @media (min-width: at-least($large)) {
+    @content;
+  }
+}
+
 .streamer-show {
   .page-menu__content {
     overflow: hidden;
@@ -18,11 +22,11 @@ $mq-picture: $mq-large;
       margin-#{$end-direction}: 0.2em;
       display: none;
 
-      @include breakpoint($mq-xx-small) {
+      @media (min-width: at-least($xx-small)) {
         display: inline;
       }
 
-      @include breakpoint($mq-picture) {
+      @include mq-at-least-picture {
         display: none;
       }
     }
@@ -32,7 +36,7 @@ $mq-picture: $mq-large;
     margin-#{$end-direction}: $block-gap;
     display: none;
 
-    @include breakpoint($mq-medium) {
+    @media (min-width: at-least($medium)) {
       display: block;
     }
 
@@ -44,7 +48,7 @@ $mq-picture: $mq-large;
   .picture {
     display: none;
 
-    @include breakpoint($mq-picture) {
+    @include mq-at-least-picture {
       display: block;
     }
   }
@@ -108,7 +112,7 @@ $mq-picture: $mq-large;
     text-transform: none;
     display: none;
 
-    @include breakpoint($mq-small) {
+    @media (min-width: at-least($small)) {
       display: flex;
     }
 
diff --git a/ui/pagelets/css/team/_admin.scss b/ui/pagelets/css/team/_admin.scss
index 0055f3a5320a..ecfdc43345ee 100644
--- a/ui/pagelets/css/team/_admin.scss
+++ b/ui/pagelets/css/team/_admin.scss
@@ -24,7 +24,7 @@
     padding-bottom: $box-padding-vert;
   }
   table {
-    @include breakpoint($mq-x-small) {
+    @media (min-width: at-least($x-small)) {
       .highlight,
       tbody tr:hover td,
       tbody tr:hover th {
@@ -34,7 +34,7 @@
         }
       }
     }
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       .highlight {
         background: mix($c-primary, $c-bg-page, 15%) !important;
       }
diff --git a/ui/pagelets/css/team/_list.scss b/ui/pagelets/css/team/_list.scss
index c3d53bab1f95..b1237c98a664 100644
--- a/ui/pagelets/css/team/_list.scss
+++ b/ui/pagelets/css/team/_list.scss
@@ -48,7 +48,7 @@
     white-space: nowrap;
     display: none;
 
-    @include breakpoint($mq-x-small) {
+    @media (min-width: at-least($x-small)) {
       display: table-cell;
     }
   }
diff --git a/ui/pagelets/css/team/_show.scss b/ui/pagelets/css/team/_show.scss
index 66638df850a1..751477209b33 100644
--- a/ui/pagelets/css/team/_show.scss
+++ b/ui/pagelets/css/team/_show.scss
@@ -40,7 +40,7 @@ $section-margin-more: 5vh;
   &__content {
     margin: 0 var(--box-padding);
 
-    @include breakpoint($mq-small) {
+    @media (min-width: at-least($small)) {
       display: flex;
 
       &__col1 {
@@ -100,7 +100,7 @@ $section-margin-more: 5vh;
   }
 
   &__members {
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       display: none;
     }
 
diff --git a/ui/pagelets/css/tv/_side.scss b/ui/pagelets/css/tv/_side.scss
index fab4b6f6e84e..2217ae96a71d 100644
--- a/ui/pagelets/css/tv/_side.scss
+++ b/ui/pagelets/css/tv/_side.scss
@@ -35,7 +35,7 @@
   }
 }
 
-@include breakpoint($mq-subnav-top) {
+@include mq-subnav-top {
   .round__side {
     overflow: hidden;
   }
diff --git a/ui/pagelets/css/tv/_single.scss b/ui/pagelets/css/tv/_single.scss
index 9f1fce909998..bfe34dc32aa2 100644
--- a/ui/pagelets/css/tv/_single.scss
+++ b/ui/pagelets/css/tv/_single.scss
@@ -1,13 +1,9 @@
 @import 'side';
 
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 .tv-single {
   grid-template-areas: 'app' 'under' 'side' 'uchat';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: auto 1fr;
     grid-template-rows: auto fit-content(0) fit-content(0);
     grid-template-areas: 'app   app' 'side under';
@@ -17,7 +13,7 @@ $mq-col3: $mq-col3-uniboard;
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side app   app' 'side under .';
diff --git a/ui/pagelets/css/ublog/_topic.scss b/ui/pagelets/css/ublog/_topic.scss
index 5bf91b8c278d..941102674b18 100644
--- a/ui/pagelets/css/ublog/_topic.scss
+++ b/ui/pagelets/css/ublog/_topic.scss
@@ -5,7 +5,7 @@
     grid-gap: 0 2%;
     grid-template-rows: auto; /* first row auto */
     grid-auto-rows: 0; /* all the other rows 0 */
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       display: grid;
     }
     opacity: 0.65;
diff --git a/ui/pagelets/css/user/_activity.scss b/ui/pagelets/css/user/_activity.scss
index 2d05e0efaf1d..fe544862f131 100644
--- a/ui/pagelets/css/user/_activity.scss
+++ b/ui/pagelets/css/user/_activity.scss
@@ -6,7 +6,7 @@ $c-contours: mix($c-brag, $c-shade, 80%);
     margin-#{$start-direction}: 2rem;
     padding-top: 1rem;
 
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       margin-#{$end-direction}: 2em;
     }
   }
@@ -48,7 +48,7 @@ $c-contours: mix($c-brag, $c-shade, 80%);
     }
   }
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     .entries {
       margin: 30px 50px 0 50px;
       border-#{$start-direction}: 3px solid $c-contours;
diff --git a/ui/pagelets/css/user/_list.scss b/ui/pagelets/css/user/_list.scss
index 68f15ad24167..1ac0e76b0525 100644
--- a/ui/pagelets/css/user/_list.scss
+++ b/ui/pagelets/css/user/_list.scss
@@ -6,7 +6,7 @@ $user-list-width: 30ch;
   grid-gap: 2rem;
   grid-template-areas: 'online' 'leaders';
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     grid-template-columns: min-content 1fr;
     grid-template-rows: min-content;
     grid-template-areas: 'online leaders' 'online .';
diff --git a/ui/pagelets/css/user/_sub-rating.scss b/ui/pagelets/css/user/_sub-rating.scss
index 507edb60249c..d1082c5f527c 100644
--- a/ui/pagelets/css/user/_sub-rating.scss
+++ b/ui/pagelets/css/user/_sub-rating.scss
@@ -98,7 +98,7 @@
     font-size: 1.2em;
   }
 
-  @include breakpoint($mq-not-medium) {
+  @include mq-topnav-hidden {
     a {
       padding: 0.3em;
     }
@@ -112,7 +112,7 @@
     }
   }
 
-  @include breakpoint($mq-subnav-top) {
+  @include mq-subnav-top {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(9ch, 1fr));
 
diff --git a/ui/pagelets/css/user/_trophy.scss b/ui/pagelets/css/user/_trophy.scss
index b06278c0a408..1f9f427882f2 100644
--- a/ui/pagelets/css/user/_trophy.scss
+++ b/ui/pagelets/css/user/_trophy.scss
@@ -9,7 +9,7 @@
   justify-content: flex-end;
   margin-top: 0 !important;
 
-  @include breakpoint($mq-not-small) {
+  @media (max-width: at-most($small)) {
     display: none;
   }
 }
diff --git a/ui/puz/css/_clock.scss b/ui/puz/css/_clock.scss
index a8fffbc6bdaa..5b4d0f15bb9f 100644
--- a/ui/puz/css/_clock.scss
+++ b/ui/puz/css/_clock.scss
@@ -9,7 +9,7 @@
     transition: color 0.3s;
     margin: 2vh 0;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       margin: 0 0 -0.2em 0;
     }
   }
diff --git a/ui/puz/css/_puz.scss b/ui/puz/css/_puz.scss
index 75f2fc7d1591..c17fa55b7ea3 100644
--- a/ui/puz/css/_puz.scss
+++ b/ui/puz/css/_puz.scss
@@ -7,7 +7,7 @@
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height} - 9rem);
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --main-max-width: auto;
   }
 
@@ -29,7 +29,7 @@
 }
 
 .puz-board {
-  @include breakpoint($mq-col2-uniboard-squeeze) {
+  @include mq-is-col2-squeeze {
     width: 40vw;
   }
 }
diff --git a/ui/puz/css/_side.scss b/ui/puz/css/_side.scss
index 278a6d24c9dc..fe523e9212f6 100644
--- a/ui/puz/css/_side.scss
+++ b/ui/puz/css/_side.scss
@@ -1,5 +1,3 @@
-$mq-col2: $mq-col2-uniboard;
-
 .puz-side {
   @extend %box-neat;
 
@@ -10,7 +8,7 @@ $mq-col2: $mq-col2-uniboard;
   margin: 0;
   padding: 2vh 2vw;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     padding: 3vh 2vw;
 
     .zenable.zen & {
@@ -57,7 +55,7 @@ $mq-col2: $mq-col2-uniboard;
     color: $c-brag;
     margin: auto;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       margin: 0;
     }
 
@@ -68,7 +66,7 @@ $mq-col2: $mq-col2-uniboard;
         font-size: 2em;
         font-weight: normal;
 
-        @include breakpoint($mq-col2) {
+        @include mq-at-least-col2 {
           font-size: 2.2em;
         }
       }
@@ -78,7 +76,7 @@ $mq-col2: $mq-col2-uniboard;
 
         letter-spacing: 0.1em;
 
-        @include breakpoint($mq-col2) {
+        @include mq-at-least-col2 {
           font-size: 1.5em;
           letter-spacing: 0.2em;
         }
diff --git a/ui/puzzle/css/_after.scss b/ui/puzzle/css/_after.scss
index 0418d4d1257a..8f8823332909 100644
--- a/ui/puzzle/css/_after.scss
+++ b/ui/puzzle/css/_after.scss
@@ -1,7 +1,7 @@
 .puzzle__feedback.after {
   flex-flow: row nowrap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     flex-flow: column;
   }
 
@@ -60,7 +60,7 @@
       }
     }
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       display: flex;
     }
   }
@@ -82,7 +82,7 @@
       }
     }
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       display: block;
       margin: 0 1em;
     }
diff --git a/ui/puzzle/css/_dashboard.scss b/ui/puzzle/css/_dashboard.scss
index 0c868ae47a92..1d9d22d560ed 100644
--- a/ui/puzzle/css/_dashboard.scss
+++ b/ui/puzzle/css/_dashboard.scss
@@ -48,7 +48,7 @@
     display: flex;
     gap: 1em;
 
-    @include breakpoint($mq-not-x-small) {
+    @media (max-width: at-most($x-small)) {
       flex-direction: column;
       font-size: 0.7em;
     }
diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss
index c863980d6c4b..6a95c8d2b189 100644
--- a/ui/puzzle/css/_layout.scss
+++ b/ui/puzzle/css/_layout.scss
@@ -3,12 +3,12 @@ $puzzle-block-gap: $block-gap-half;
 #main-wrap {
   --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     --main-max-width: auto;
   }
 }
 
-@include breakpoint(max-height 1050px) {
+@media (max-height: at-most(1050px)) {
   body {
     overflow-y: scroll;
     margin-bottom: 0;
@@ -63,7 +63,7 @@ $puzzle-block-gap: $block-gap-half;
     display: none;
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: var(--col2-uniboard-width) $puzzle-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
@@ -77,11 +77,11 @@ $puzzle-block-gap: $block-gap-half;
     }
   }
 
-  @include breakpoint($mq-col2-uniboard-squeeze) {
+  @include mq-is-col2-squeeze {
     grid-template-columns: $col2-uniboard-squeeze-width $puzzle-block-gap $col2-uniboard-squeeze-table;
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-areas:
       'side    . board   gauge tools'
       'side    . session .     controls'
@@ -99,7 +99,7 @@ $puzzle-block-gap: $block-gap-half;
       grid-template-areas: 'replay' 'user' 'theme' 'metas' 'config';
     }
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       grid-template-columns: 1fr 1fr;
       grid-template-areas: 'metas user' 'metas theme' 'config theme' '. theme';
       grid-template-rows: min-content min-content min-content;
@@ -109,7 +109,7 @@ $puzzle-block-gap: $block-gap-half;
       }
     }
 
-    @include breakpoint($mq-x-large) {
+    @media (min-width: at-least($x-large)) {
       grid-template-columns: 1fr;
       grid-template-areas: 'metas' 'user' 'theme' 'config';
       grid-template-rows: min-content min-content min-content;
diff --git a/ui/puzzle/css/_openings.scss b/ui/puzzle/css/_openings.scss
index 028e5be4dbc9..3dee239d0dd3 100644
--- a/ui/puzzle/css/_openings.scss
+++ b/ui/puzzle/css/_openings.scss
@@ -13,7 +13,7 @@
     margin: 0 0 3em var(--box-padding);
     grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
     }
   }
@@ -36,7 +36,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       &::before {
         display: none;
       }
diff --git a/ui/puzzle/css/_puzzle.scss b/ui/puzzle/css/_puzzle.scss
index 1a6243fb5969..fa543c50d403 100644
--- a/ui/puzzle/css/_puzzle.scss
+++ b/ui/puzzle/css/_puzzle.scss
@@ -1,8 +1,3 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2-squeeze: $mq-col2-uniboard-squeeze;
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 @import 'layout';
 @import 'side';
 @import 'tools';
diff --git a/ui/puzzle/css/_themes.scss b/ui/puzzle/css/_themes.scss
index 5e40c4d73812..5a49c32c0455 100644
--- a/ui/puzzle/css/_themes.scss
+++ b/ui/puzzle/css/_themes.scss
@@ -10,7 +10,7 @@
     margin-#{$start-direction}: var(--box-padding);
     grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
     }
 
@@ -39,7 +39,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       &::before {
         display: none;
       }
@@ -89,7 +89,7 @@
         background: mix($c-bg-box, $c-good, 74%);
       }
 
-      @include breakpoint($mq-not-small) {
+      @media (max-width: at-most($small)) {
         margin: 2em var(--box-padding) 2em 0;
       }
     }
diff --git a/ui/puzzle/css/_tools.scss b/ui/puzzle/css/_tools.scss
index a28518299356..744cd0a5760d 100644
--- a/ui/puzzle/css/_tools.scss
+++ b/ui/puzzle/css/_tools.scss
@@ -49,8 +49,8 @@
 
   flex: 1 0 9rem;
 
-  @include breakpoint($mq-col2) {
-    @include breakpoint($mq-tall) {
+  @include mq-at-least-col2 {
+    @media (min-height: at-least($tall)) {
       flex: 1 0 17rem;
     }
   }
@@ -132,7 +132,7 @@
   height: $col3-uniboard-controls;
   margin-top: #{-$puzzle-block-gap};
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     height: $col1-uniboard-controls;
   }
 
@@ -142,7 +142,7 @@
     flex: 1 1 auto;
   }
   .board-menu {
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       bottom: $col3-uniboard-controls;
       border-radius: $box-radius-size $box-radius-size 0 0;
       border-bottom: 2px solid $c-secondary;
diff --git a/ui/racer/css/_home.scss b/ui/racer/css/_home.scss
index ce9082d21a40..0f28807c4569 100644
--- a/ui/racer/css/_home.scss
+++ b/ui/racer/css/_home.scss
@@ -60,7 +60,7 @@
     }
   }
 
-  @include breakpoint($mq-not-small) {
+  @media (max-width: at-most($small)) {
     &__buttons {
       display: block;
     }
diff --git a/ui/racer/css/_racer.scss b/ui/racer/css/_racer.scss
index 7e552745ae51..ed6f87a0b676 100644
--- a/ui/racer/css/_racer.scss
+++ b/ui/racer/css/_racer.scss
@@ -13,7 +13,7 @@
   grid-column-gap: $block-gap;
   grid-template-areas: 'board' 'race' 'side' 'history';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
     grid-template-rows: auto fit-content(0);
     grid-template-areas:
@@ -101,7 +101,7 @@
     &__pov {
       color: $c-brag;
       margin: 1em 0;
-      @include breakpoint($mq-col2) {
+      @include mq-at-least-col2 {
         margin: 1em 0 0 0;
       }
     }
diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
index 429a6de7479d..4cb7a968aea1 100644
--- a/ui/round/css/_app-layout.scss
+++ b/ui/round/css/_app-layout.scss
@@ -46,7 +46,7 @@
 .round__app {
   display: grid;
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     grid-template-rows: auto auto $col1-user-height $col1-mat-height auto auto $col1-mat-height $col1-user-height auto;
     grid-template-areas: 'moves' 'pocket-top' 'user-top' 'mat-top' 'board' 'expi-bot' 'mat-bot' 'user-bot' 'pocket-bot' 'kb-move' 'controls' 'voice';
 
@@ -76,7 +76,7 @@
     }
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-areas: 'board voice' 'board .' 'board mat-top' 'board clock-top' 'board expi-top' 'board user-top' 'board moves' 'board controls' 'board user-bot' 'board expi-bot' 'board clock-bot' 'board mat-bot' 'board .' 'kb-move .';
     grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
     grid-column-gap: $block-gap;
@@ -102,18 +102,18 @@
       margin-top: $block-gap;
     }
 
-    @include breakpoint($mq-short) {
+    @media (min-height: at-least($short)) {
       #{$moves-tag} {
         display: flex;
       }
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: var(--col3-uniboard-width) $col3-uniboard-table;
   }
 
-  @include breakpoint($mq-col2-uniboard-squeeze) {
+  @include mq-is-col2-squeeze {
     grid-template-columns: $col2-uniboard-squeeze-width $col2-uniboard-squeeze-table;
     grid-column-gap: #{$block-gap * 3 / 2};
   }
diff --git a/ui/round/css/_clock.scss b/ui/round/css/_clock.scss
index 34094ae90dc1..b87cab88d4d9 100644
--- a/ui/round/css/_clock.scss
+++ b/ui/round/css/_clock.scss
@@ -4,14 +4,14 @@
   justify-content: flex-end;
   user-select: none;
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     /* that weird shit is required so the clock goes above the player since they share the same grid cell */
     justify-self: flex-end;
     z-index: 1;
   }
 
   /* overflow: hidden; is not possible because of clock bars and shadows */
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     justify-content: space-between;
 
     &-bottom {
@@ -24,7 +24,7 @@
     align-self: center;
     line-height: $col1-player-clock-height;
 
-    @include breakpoint($mq-col1-uniboard) {
+    @include mq-is-col1 {
       &__text {
         background: $c-bg-box;
         padding: 0 $block-gap;
@@ -33,7 +33,7 @@
       }
     }
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       height: 2.2em;
       line-height: 2.2em;
     }
@@ -47,7 +47,7 @@
     }
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     .bar {
       display: block;
       position: absolute;
@@ -91,17 +91,17 @@
       font-size: 2.3em;
     }
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       border-radius: 0;
       box-shadow: none;
     }
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       align-items: flex-end;
       line-height: 1.2em;
     }
 
-    @include breakpoint($mq-xx-small $mq-tall) {
+    @media (min-width: at-least($xx-small)) and (min-height: at-least($tall)) {
       font-size: 3.6em;
       letter-spacing: 0.12em;
 
@@ -125,11 +125,11 @@
     letter-spacing: inherit;
     direction: $direction;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       line-height: 1.5em;
     }
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       font-size: 1.9em;
     }
   }
@@ -142,7 +142,7 @@
   huns {
     font-size: 80%;
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       display: none;
 
       /* since clock is right-aligned, huns shift it left on every move */
@@ -190,7 +190,7 @@
 
     display: none;
 
-    @include breakpoint(420px) {
+    @media (min-width: at-least(420px)) {
       order: -1;
       display: flex;
       flex: 0 1 auto;
@@ -198,7 +198,7 @@
       padding: 0 0.3em;
     }
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       order: inherit;
     }
   }
diff --git a/ui/round/css/_constants.scss b/ui/round/css/_constants.scss
index 2c9a5ee9b534..373d313be56b 100644
--- a/ui/round/css/_constants.scss
+++ b/ui/round/css/_constants.scss
@@ -1,8 +1,4 @@
 // layout
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 $col1-player-clock-height: 50px;
 $col1-user-height: $col1-player-clock-height * 3 / 5;
 $col1-mat-height: $col1-player-clock-height * 2 / 5;
diff --git a/ui/round/css/_control.scss b/ui/round/css/_control.scss
index e16d349bce17..25b31845b6ef 100644
--- a/ui/round/css/_control.scss
+++ b/ui/round/css/_control.scss
@@ -98,7 +98,7 @@
       background: $c-bad;
     }
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       a {
         line-height: 1.6em;
         flex: 0 0 2.5rem;
@@ -152,7 +152,7 @@
       height: 40px;
     }
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       margin-top: $block-gap;
     }
   }
@@ -161,7 +161,7 @@
   .board-menu-toggle {
     display: none;
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       display: block;
       margin-#{$start-direction}: 2em;
     }
@@ -269,7 +269,7 @@
 
       display: none;
 
-      @include breakpoint($mq-col2) {
+      @include mq-at-least-col2 {
         display: block;
       }
 
diff --git a/ui/round/css/_layout.scss b/ui/round/css/_layout.scss
index d9ea8135f06b..8b4d04d99410 100644
--- a/ui/round/css/_layout.scss
+++ b/ui/round/css/_layout.scss
@@ -1,7 +1,7 @@
 #main-wrap {
   --main-max-width: auto;
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     --main-max-width: calc(
       100vh - #{$site-header-outer-height} - #{$col1-player-clock-height * 2} - #{$col1-moves-height}
     );
@@ -35,7 +35,7 @@
 
   grid-template-areas: 'app' 'under' 'side' 'uchat';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto fit-content(0) fit-content(0);
     grid-template-areas: 'app   app' 'under side' 'under uchat';
@@ -45,7 +45,7 @@
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side  app   app' 'uchat under .';
@@ -53,7 +53,7 @@
     @include crosstable-large;
   }
 
-  @include breakpoint($mq-col2-uniboard-squeeze) {
+  @include mq-is-col2-squeeze {
     .crosstable {
       display: none;
     }
diff --git a/ui/round/css/_material.scss b/ui/round/css/_material.scss
index 999c0aadcf56..06b0ccc2bba2 100644
--- a/ui/round/css/_material.scss
+++ b/ui/round/css/_material.scss
@@ -29,7 +29,7 @@
     vertical-align: top;
   }
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     height: $col1-mat-height;
     margin-#{$start-direction}: 3vmin;
 
diff --git a/ui/round/css/_moves-col1.scss b/ui/round/css/_moves-col1.scss
index eb71437b1299..fe7506da94ba 100644
--- a/ui/round/css/_moves-col1.scss
+++ b/ui/round/css/_moves-col1.scss
@@ -1,5 +1,5 @@
 /* context: .rmoves */
-@include breakpoint($mq-col1) {
+@include mq-is-col1 {
   overflow: hidden;
 
   .col1-moves {
diff --git a/ui/round/css/_moves-col2.scss b/ui/round/css/_moves-col2.scss
index 8e10d12490ea..a3b864a2d07d 100644
--- a/ui/round/css/_moves-col2.scss
+++ b/ui/round/css/_moves-col2.scss
@@ -1,5 +1,5 @@
 /* context: #{$rmoves-tag} */
-@include breakpoint($mq-col2) {
+@include mq-at-least-col2 {
   background: $c-bg-box;
 
   .fbt,
diff --git a/ui/round/css/_moves.scss b/ui/round/css/_moves.scss
index e47bd2ca990c..cd7a60dce0f0 100644
--- a/ui/round/css/_moves.scss
+++ b/ui/round/css/_moves.scss
@@ -26,7 +26,7 @@ $buttons-height: 2.5rem;
     font-size: 0.9em;
     order: 2;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       order: 0;
     }
   }
@@ -46,7 +46,7 @@ $buttons-height: 2.5rem;
   @import 'moves-col2';
 }
 
-@include breakpoint($mq-col1) {
+@include mq-is-col1 {
   .col1-rmoves-preload {
     height: 2.5em;
   }
diff --git a/ui/round/css/_now-playing.scss b/ui/round/css/_now-playing.scss
index d40262c9758f..103c8638ccdc 100644
--- a/ui/round/css/_now-playing.scss
+++ b/ui/round/css/_now-playing.scss
@@ -4,7 +4,7 @@
 
     margin: 1em 0 0.5em 0;
 
-    @include breakpoint($mq-col1) {
+    @include mq-is-col1 {
       margin: 1em $block-gap 0.5em $block-gap;
     }
   }
diff --git a/ui/round/css/_user.scss b/ui/round/css/_user.scss
index e7c99c566776..5bf24a479104 100644
--- a/ui/round/css/_user.scss
+++ b/ui/round/css/_user.scss
@@ -61,7 +61,7 @@
     margin-#{$end-direction}: 0.2em;
   }
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     padding: 0.5em 0.5em 0.5em 0.3em;
     line-height: inherit;
 
@@ -69,7 +69,7 @@
       flex: 1 1 auto;
     }
   }
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     &-top {
       align-self: flex-end;
     }
diff --git a/ui/round/css/_zh.scss b/ui/round/css/_zh.scss
index 5763b3646d3c..b2403138b579 100644
--- a/ui/round/css/_zh.scss
+++ b/ui/round/css/_zh.scss
@@ -9,7 +9,7 @@
     margin-top: -0.5em;
   }
 
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     &-top {
       grid-area: pocket-top;
     }
@@ -19,7 +19,7 @@
     }
   }
 
-  @include breakpoint($mq-col2-uniboard) {
+  @include mq-at-least-col2 {
     &-top {
       margin-bottom: $block-gap;
     }
@@ -30,14 +30,14 @@
   }
 }
 
-@include breakpoint($mq-col2) {
-  @include breakpoint($mq-short) {
+@include mq-at-least-col2 {
+  @media (min-height: at-least($short)) {
     #{$moves-tag} {
       display: none;
     }
   }
 
-  @include breakpoint($mq-tall) {
+  @media (min-height: at-least($tall)) {
     #{$moves-tag} {
       display: flex;
     }
@@ -45,7 +45,7 @@
 }
 
 .ricons {
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     justify-content: flex-end;
   }
 }
diff --git a/ui/simul/css/_layout.scss b/ui/simul/css/_layout.scss
index 7787f045330a..37da8e2556cf 100644
--- a/ui/simul/css/_layout.scss
+++ b/ui/simul/css/_layout.scss
@@ -16,7 +16,7 @@
   grid-template-areas: 'main' 'side' 'uchat';
   grid-gap: $block-gap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     &:not(.simul-created) {
       grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
       grid-template-rows: auto max-content;
@@ -24,7 +24,7 @@
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     &.simul {
       grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
       grid-template-rows: auto fit-content(0);
diff --git a/ui/simul/css/_list.scss b/ui/simul/css/_list.scss
index c7be08995b77..a6bf801e12e3 100644
--- a/ui/simul/css/_list.scss
+++ b/ui/simul/css/_list.scss
@@ -22,7 +22,7 @@
 
     display: none;
 
-    @include breakpoint($mq-large) {
+    @media (min-width: at-least($large)) {
       display: block;
     }
   }
@@ -38,13 +38,13 @@
       display: none;
     }
 
-    @include breakpoint($mq-x-small) {
+    @media (min-width: at-least($x-small)) {
       .host {
         display: table-cell;
       }
     }
 
-    @include breakpoint($mq-small) {
+    @media (min-width: at-least($small)) {
       .players {
         display: table-cell;
       }
diff --git a/ui/simul/css/_show.scss b/ui/simul/css/_show.scss
index 3b8ae712ffec..8416bea716ee 100644
--- a/ui/simul/css/_show.scss
+++ b/ui/simul/css/_show.scss
@@ -1,6 +1,8 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-small;
-$mq-col3: $mq-col3-uniboard;
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
 
 $box-padding: var(--box-padding);
 
@@ -10,7 +12,7 @@ $box-padding: var(--box-padding);
 @import 'started';
 
 .simul {
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     .box__top {
       flex-wrap: nowrap;
     }
@@ -45,7 +47,7 @@ $box-padding: var(--box-padding);
     background: $c-bg-zebra;
     overflow-wrap: anywhere;
 
-    @include breakpoint($mq-col3) {
+    @include mq-at-least-col3 {
       margin: 0 auto 2em auto;
       padding: 1.5em 2.5em;
       width: 70%;
diff --git a/ui/site/src/topBar.ts b/ui/site/src/topBar.ts
index d45d05eae8ba..4622a7582000 100644
--- a/ui/site/src/topBar.ts
+++ b/ui/site/src/topBar.ts
@@ -11,7 +11,7 @@ export default function () {
     };
 
   // On touchscreens, clicking the top menu element expands it. There's no top link.
-  // Only for $mq-topnav-hidden in ui/common/css/abstract/_media-queries.scss
+  // Only for mq-topnav-hidden in ui/common/css/abstract/_media-queries.scss
   if ('ontouchstart' in window && !window.matchMedia('(max-width: 979px)').matches)
     $('#topnav > section > a').removeAttr('href');
 
diff --git a/ui/storm/css/_dashboard.scss b/ui/storm/css/_dashboard.scss
index 58a915590b41..5bcd3d3c5ff2 100644
--- a/ui/storm/css/_dashboard.scss
+++ b/ui/storm/css/_dashboard.scss
@@ -28,7 +28,7 @@
       }
     }
 
-    @include breakpoint($mq-not-small) {
+    @media (max-width: at-most($small)) {
       td,
       th {
         &:nth-child(3),
@@ -39,7 +39,7 @@
       }
     }
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       td,
       th {
         &:nth-child(3),
diff --git a/ui/storm/css/_end.scss b/ui/storm/css/_end.scss
index b751a8af4919..035b7b6a59e2 100644
--- a/ui/storm/css/_end.scss
+++ b/ui/storm/css/_end.scss
@@ -23,7 +23,7 @@
   grid-column-gap: $block-gap;
   grid-template-areas: 'high' 'score' 'play' 'stats' 'history';
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-areas:
       'high high'
       'score stats'
@@ -41,7 +41,7 @@
     &__content {
       @extend %flex-between;
 
-      @include breakpoint($mq-col2) {
+      @include mq-at-least-col2 {
         &::before,
         &::after {
           content: ' ';
@@ -97,7 +97,7 @@
     color: $c-good-over;
     padding: 1em 0;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       padding: 1em 3em;
     }
 
@@ -107,7 +107,7 @@
       text-align: center;
       font-size: 11em;
 
-      @include breakpoint($mq-xx-small) {
+      @media (min-width: at-least($xx-small)) {
         font-size: 14em;
       }
     }
diff --git a/ui/storm/css/_high.scss b/ui/storm/css/_high.scss
index e96fa829dd62..632bc5e47eaa 100644
--- a/ui/storm/css/_high.scss
+++ b/ui/storm/css/_high.scss
@@ -3,7 +3,7 @@
     display: flex;
     flex-flow: row wrap;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       flex-flow: row nowrap;
     }
   }
@@ -18,7 +18,7 @@
     background: $c-bg-box;
     padding: 3em 1em 1.5em 1em;
 
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       flex: 48% 0;
       margin-bottom: 1vh;
 
@@ -32,7 +32,7 @@
       font-weight: normal;
       font-size: 3em;
 
-      @include breakpoint($mq-xx-small) {
+      @media (min-width: at-least($xx-small)) {
         font-size: 5em;
       }
     }
@@ -46,7 +46,7 @@
           font-size: 4em;
           line-height: 0.8em;
 
-          @include breakpoint($mq-xx-small) {
+          @media (min-width: at-least($xx-small)) {
             font-size: 9em;
           }
         }
diff --git a/ui/storm/css/_play-again.scss b/ui/storm/css/_play-again.scss
index 6a766708b754..ed93a86a2e99 100644
--- a/ui/storm/css/_play-again.scss
+++ b/ui/storm/css/_play-again.scss
@@ -29,12 +29,12 @@
   letter-spacing: 0.4em;
   padding: 1em 0;
 
-  @include breakpoint($mq-xx-small) {
+  @media (min-width: at-least($xx-small)) {
     font-size: 2em;
     padding: 1em 2em;
   }
 
-  @include breakpoint($mq-small) {
+  @media (min-width: at-least($small)) {
     justify-content: space-between;
     letter-spacing: 0.6em;
 
diff --git a/ui/storm/css/_play.scss b/ui/storm/css/_play.scss
index 7dc452c4c923..b95594cd780a 100644
--- a/ui/storm/css/_play.scss
+++ b/ui/storm/css/_play.scss
@@ -6,7 +6,7 @@
     grid-column-gap: $block-gap;
     grid-template-areas: 'board' 'side';
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
       grid-template-rows: fit-content(0);
       grid-template-areas: 'board   side';
@@ -29,7 +29,7 @@
     color: $c-brag;
     margin-#{$start-direction}: 5vw;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       position: absolute;
       bottom: -3em;
       margin-#{$start-direction}: 0;
diff --git a/ui/storm/css/_storm.scss b/ui/storm/css/_storm.scss
index 08c5bb9c0d2c..fa52e4770773 100644
--- a/ui/storm/css/_storm.scss
+++ b/ui/storm/css/_storm.scss
@@ -1,5 +1,3 @@
-$mq-col2: $mq-col2-uniboard;
-
 @import 'play';
 @import 'end';
 @import 'high';
@@ -13,7 +11,7 @@ $mq-col2: $mq-col2-uniboard;
     color: $c-font-page;
     margin: 2vh 2vw;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       margin: 2vh 0.5rem;
     }
 
@@ -23,7 +21,7 @@ $mq-col2: $mq-col2-uniboard;
   }
 
   &-dashboard__high__periods {
-    @include breakpoint($mq-not-xx-small) {
+    @media (max-width: at-most($xx-small)) {
       display: none;
     }
 
diff --git a/ui/swiss/css/_app-control.scss b/ui/swiss/css/_app-control.scss
index bd5d5529b5d3..c4c6ce1b6bf7 100644
--- a/ui/swiss/css/_app-control.scss
+++ b/ui/swiss/css/_app-control.scss
@@ -7,7 +7,7 @@
   .fbt {
     padding: 0.6em 0.8em;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       padding: 0.6em 1em;
     }
 
diff --git a/ui/swiss/css/_layout.scss b/ui/swiss/css/_layout.scss
index ced325edc0f2..756ec80115e9 100644
--- a/ui/swiss/css/_layout.scss
+++ b/ui/swiss/css/_layout.scss
@@ -1,4 +1,4 @@
-@include breakpoint($mq-col2) {
+@include mq-at-least-col2 {
   #main-wrap {
     --main-max-width: auto;
   }
@@ -32,7 +32,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   grid-template-areas: 'main' 'side' 'uchat' 'table';
   grid-gap: $block-gap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
     grid-template-rows: $chat-optimal-size min-content;
     grid-template-areas: 'main  side' 'main  uchat' 'table table';
@@ -42,7 +42,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
     grid-template-rows: $chat-optimal-size auto;
     grid-template-areas: 'side  main table' 'uchat main table';
diff --git a/ui/swiss/css/_show.scss b/ui/swiss/css/_show.scss
index 7cedfaa59058..5b62bb814017 100644
--- a/ui/swiss/css/_show.scss
+++ b/ui/swiss/css/_show.scss
@@ -1,6 +1,8 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-small;
-$mq-col3: $mq-col3-uniboard;
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
 
 @import 'layout';
 @import 'side';
diff --git a/ui/swiss/css/_side.scss b/ui/swiss/css/_side.scss
index a979f465f268..751b9b6ab9e1 100644
--- a/ui/swiss/css/_side.scss
+++ b/ui/swiss/css/_side.scss
@@ -5,7 +5,7 @@
     flex: 1 1 7em;
     margin-top: $block-gap;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       min-height: inherit;
     }
   }
@@ -90,7 +90,7 @@
   overflow: visible;
 
   /* fixes invisible spectators on firefox, col2 */
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     margin: 0 $block-gap;
   }
 }
diff --git a/ui/tournament/css/_app-control.scss b/ui/tournament/css/_app-control.scss
index b22f7b1da961..962ab0f5bd38 100644
--- a/ui/tournament/css/_app-control.scss
+++ b/ui/tournament/css/_app-control.scss
@@ -7,7 +7,7 @@
   .fbt {
     padding: 0.6em 0.8em;
 
-    @include breakpoint($mq-xx-small) {
+    @media (min-width: at-least($xx-small)) {
       padding: 0.6em 1em;
     }
 
diff --git a/ui/tournament/css/_app-standing.scss b/ui/tournament/css/_app-standing.scss
index 055da326f101..06332a86cbc9 100644
--- a/ui/tournament/css/_app-standing.scss
+++ b/ui/tournament/css/_app-standing.scss
@@ -15,7 +15,7 @@
       display: inline-block;
       padding-#{$end-direction}: 5px;
       max-width: 140px;
-      @include breakpoint($mq-x-large) {
+      @media (min-width: at-least($x-large)) {
         max-width: 200px;
       }
     }
diff --git a/ui/tournament/css/_duel.scss b/ui/tournament/css/_duel.scss
index 2fc5120dd46b..fbbd97fd9b39 100644
--- a/ui/tournament/css/_duel.scss
+++ b/ui/tournament/css/_duel.scss
@@ -3,11 +3,11 @@
 
   margin: $block-gap 0 0 0;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     margin: 0 0 0 $block-gap;
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     margin: $block-gap 0 0 0;
   }
 
diff --git a/ui/tournament/css/_layout.scss b/ui/tournament/css/_layout.scss
index 3d146cffd2fe..9111a60598db 100644
--- a/ui/tournament/css/_layout.scss
+++ b/ui/tournament/css/_layout.scss
@@ -1,4 +1,4 @@
-@include breakpoint($mq-col2) {
+@include mq-at-least-col2 {
   #main-wrap {
     --main-max-width: auto;
   }
@@ -30,7 +30,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
   grid-template-areas: 'main' 'side' 'uchat' 'table';
   grid-gap: $block-gap;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     grid-template-columns: $col2-uniboard-default-width $col2-uniboard-table;
     grid-template-rows: $chat-optimal-size min-content;
     grid-template-areas: 'main  side' 'main  uchat' 'table table';
@@ -48,7 +48,7 @@ $chat-optimal-size: calc(100vh - #{$site-header-outer-height} - #{$block-gap} -
     }
   }
 
-  @include breakpoint($mq-col3) {
+  @include mq-at-least-col3 {
     grid-template-columns: $col3-uniboard-side $col3-uniboard-default-width $col3-uniboard-table;
     grid-template-rows: $chat-optimal-size auto;
     grid-template-areas: 'side  main table' 'uchat main table';
diff --git a/ui/tournament/css/_leaderboard.scss b/ui/tournament/css/_leaderboard.scss
index 9c7d2a1c53ac..d1904f3af380 100644
--- a/ui/tournament/css/_leaderboard.scss
+++ b/ui/tournament/css/_leaderboard.scss
@@ -74,7 +74,7 @@ $user-list-width: 35ch;
   text-shadow: 0 0 6px #fff;
   filter: drop-shadow(0 0 10px $c-brag);
 
-  @include breakpoint($mq-not-small) {
+  @media (max-width: at-most($small)) {
     width: 50.25px;
     height: 60px;
     font-size: 30px;
diff --git a/ui/tournament/css/_show.scss b/ui/tournament/css/_show.scss
index 23199abe3f66..4606a1049177 100644
--- a/ui/tournament/css/_show.scss
+++ b/ui/tournament/css/_show.scss
@@ -1,6 +1,8 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-small;
-$mq-col3: $mq-col3-uniboard;
+@mixin mq-at-least-col2 {
+  @media (min-width: at-least($small)) {
+    @content;
+  }
+}
 
 @import 'layout';
 @import 'side';
@@ -32,7 +34,7 @@ $mq-col3: $mq-col3-uniboard;
   padding: 4em var(--box-padding);
   display: none;
 
-  @include breakpoint($mq-col2) {
+  @include mq-at-least-col2 {
     display: block;
   }
 
diff --git a/ui/tournament/css/_side.scss b/ui/tournament/css/_side.scss
index e4795962cc38..226be218e9a8 100644
--- a/ui/tournament/css/_side.scss
+++ b/ui/tournament/css/_side.scss
@@ -5,7 +5,7 @@
     flex: 1 1 7em;
     margin-top: $block-gap;
 
-    @include breakpoint($mq-col2) {
+    @include mq-at-least-col2 {
       min-height: inherit;
     }
   }
@@ -96,7 +96,7 @@
   overflow: visible;
 
   /* fixes invisible spectators on firefox, col2 */
-  @include breakpoint($mq-col1) {
+  @include mq-is-col1 {
     margin: 0 $block-gap;
   }
 }
diff --git a/ui/tournamentSchedule/css/_finished.scss b/ui/tournamentSchedule/css/_finished.scss
index 804c12d0b6a7..592585395b6e 100644
--- a/ui/tournamentSchedule/css/_finished.scss
+++ b/ui/tournamentSchedule/css/_finished.scss
@@ -1,12 +1,12 @@
 .arena-list {
   .slist {
     .date {
-      @include breakpoint($mq-not-x-small) {
+      @media (max-width: at-most($x-small)) {
         display: none;
       }
     }
     .players {
-      @include breakpoint($mq-not-xx-small) {
+      @media (max-width: at-most($xx-small)) {
         display: none;
       }
     }
@@ -59,7 +59,7 @@
       font-size: 1.5em;
       display: block;
 
-      @include breakpoint($mq-large) {
+      @media (min-width: at-least($large)) {
         letter-spacing: 3px;
       }
     }
diff --git a/ui/tournamentSchedule/css/_layout.scss b/ui/tournamentSchedule/css/_layout.scss
index be4c04f1bdd3..821d120f60da 100644
--- a/ui/tournamentSchedule/css/_layout.scss
+++ b/ui/tournamentSchedule/css/_layout.scss
@@ -18,7 +18,7 @@
   grid-gap: $block-gap;
   grid-template-areas: 'schedule' 'side';
 
-  @include breakpoint($mq-medium) {
+  @media (min-width: at-least($medium)) {
     grid-template-columns: minmax(200px, 300px);
     grid-template-areas: 'side schedule' 'side list' 'side .';
 
diff --git a/ui/tutor/css/_card.scss b/ui/tutor/css/_card.scss
index f6785a0bce02..11d453c39c95 100644
--- a/ui/tutor/css/_card.scss
+++ b/ui/tutor/css/_card.scss
@@ -7,7 +7,7 @@
     margin: var(--box-padding) 0;
     &--triple {
       grid-template-columns: 1fr;
-      @include breakpoint($mq-medium) {
+      @media (min-width: at-least($medium)) {
         grid-template-columns: 1fr 1fr 1fr;
       }
     }
diff --git a/ui/tutor/css/_util.scss b/ui/tutor/css/_util.scss
index f4d49261e647..a4bc07075a19 100644
--- a/ui/tutor/css/_util.scss
+++ b/ui/tutor/css/_util.scss
@@ -1,5 +1,5 @@
 .tutor {
-  @include breakpoint($mq-subnav-side) {
+  @include mq-subnav-side {
     .subnav {
       width: 22ch;
       .subnav__subitem {