diff --git a/static/scss/answers/_default.scss b/static/scss/answers/_default.scss
index be366c856..4f7272950 100644
--- a/static/scss/answers/_default.scss
+++ b/static/scss/answers/_default.scss
@@ -1,5 +1,4 @@
 @use "sass:math";
-
 // Core variables and mixins
 @import "overlay/module";
 @import "common/variables";
diff --git a/static/scss/answers/cards/document-standard.scss b/static/scss/answers/cards/document-standard.scss
index 2dfa998ea..a2772937c 100644
--- a/static/scss/answers/cards/document-standard.scss
+++ b/static/scss/answers/cards/document-standard.scss
@@ -20,7 +20,7 @@
     width: 100%;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -71,7 +71,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--yxt-base-spacing) / 2);
diff --git a/static/scss/answers/cards/event-standard.scss b/static/scss/answers/cards/event-standard.scss
index f16eabc12..0fad3e910 100644
--- a/static/scss/answers/cards/event-standard.scss
+++ b/static/scss/answers/cards/event-standard.scss
@@ -49,7 +49,7 @@
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -91,7 +91,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-left: 1.5rem;
       margin-top: 0;
diff --git a/static/scss/answers/cards/financial-professional-location.scss b/static/scss/answers/cards/financial-professional-location.scss
index 1867976aa..632f9014c 100644
--- a/static/scss/answers/cards/financial-professional-location.scss
+++ b/static/scss/answers/cards/financial-professional-location.scss
@@ -27,7 +27,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -135,7 +135,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
   &-phone--desktop {
     display: none;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: flex;
     }
@@ -145,7 +145,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
     @include Link;
     display: flex;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: none;
     }
@@ -156,7 +156,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
     text-transform: uppercase;
     margin-top: calc(var(--hh-financial-professional-location-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--hh-financial-professional-location-spacing) / 2);
diff --git a/static/scss/answers/cards/job-standard.scss b/static/scss/answers/cards/job-standard.scss
index de6e0d251..d3616eefa 100644
--- a/static/scss/answers/cards/job-standard.scss
+++ b/static/scss/answers/cards/job-standard.scss
@@ -18,7 +18,7 @@
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -74,7 +74,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--yxt-base-spacing) / 2);
diff --git a/static/scss/answers/cards/link-standard.scss b/static/scss/answers/cards/link-standard.scss
index 53f0dd6c8..6174af735 100644
--- a/static/scss/answers/cards/link-standard.scss
+++ b/static/scss/answers/cards/link-standard.scss
@@ -19,7 +19,7 @@
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
diff --git a/static/scss/answers/cards/location-standard.scss b/static/scss/answers/cards/location-standard.scss
index 81a8e531b..751f7342c 100644
--- a/static/scss/answers/cards/location-standard.scss
+++ b/static/scss/answers/cards/location-standard.scss
@@ -14,7 +14,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     {
       flex-direction: column;
 
-      @media (min-width: $screen-lg-min)
+      @include bpgte(lg)
       {
         flex-direction: row;
       }
@@ -24,7 +24,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     {
       width: 100%;
 
-      @media (min-width: $breakpoint-mobile-max)
+      @include bpgte(sm)
       {
         width: 350px;
       }
@@ -34,7 +34,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     {
       flex-direction: column;
 
-      @media (min-width: $screen-lg-min)
+      @include bpgte(lg)
       {
         flex-direction: row;
       }
@@ -44,7 +44,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     {
       margin-left: 0;
 
-      @media (min-width: $screen-lg-min)
+      @include bpgte(lg)
       {
         margin-left: calc(var(--hh-location-standard-base-spacing) / 2);
       }
@@ -137,7 +137,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     display: flex;
     flex-direction: column;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       flex-direction: row;
       justify-content: space-between;
@@ -171,7 +171,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     display: flex;
     flex-direction: column;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       flex-direction: row;
       flex-wrap: wrap;
@@ -182,7 +182,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
   {
     margin-top: calc(var(--hh-location-standard-base-spacing) / 4);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       width: 200px;
       padding-right: calc(var(--hh-location-standard-base-spacing) * 2);
@@ -193,7 +193,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
   {
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       width: 320px;
     }
@@ -220,7 +220,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
   &-phone--desktop {
     display: none;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: flex;
     }
@@ -230,7 +230,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     @include Link;
     display: flex;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: none;
     }
@@ -269,7 +269,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
     text-transform: uppercase;
     margin-top: calc(var(--hh-location-standard-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-left: calc(var(--hh-location-standard-base-spacing) / 2);
       justify-content: center;
diff --git a/static/scss/answers/cards/menuitem-standard.scss b/static/scss/answers/cards/menuitem-standard.scss
index 824e1e425..407d2181d 100644
--- a/static/scss/answers/cards/menuitem-standard.scss
+++ b/static/scss/answers/cards/menuitem-standard.scss
@@ -75,7 +75,7 @@
   {
     display: flex;
     flex-direction: column;
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       flex-direction: row;
     }
@@ -87,7 +87,7 @@
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -100,7 +100,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-left: calc(var(--yxt-base-spacing) / 2);
       justify-content: center;
diff --git a/static/scss/answers/cards/product-standard.scss b/static/scss/answers/cards/product-standard.scss
index d30de509a..006d7da6d 100644
--- a/static/scss/answers/cards/product-standard.scss
+++ b/static/scss/answers/cards/product-standard.scss
@@ -52,7 +52,7 @@
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -74,7 +74,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-left: calc(var(--yxt-base-spacing) / 2);
       margin-top: 0;
diff --git a/static/scss/answers/cards/professional-location.scss b/static/scss/answers/cards/professional-location.scss
index 7d7d90230..3b7168669 100644
--- a/static/scss/answers/cards/professional-location.scss
+++ b/static/scss/answers/cards/professional-location.scss
@@ -27,7 +27,7 @@ $professional-location-ordinal-dimensions: 18px !default;
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -135,7 +135,7 @@ $professional-location-ordinal-dimensions: 18px !default;
   &-phone--desktop {
     display: none;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: flex;
     }
@@ -145,7 +145,7 @@ $professional-location-ordinal-dimensions: 18px !default;
     @include Link;
     display: flex;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: none;
     }
@@ -156,7 +156,7 @@ $professional-location-ordinal-dimensions: 18px !default;
     text-transform: uppercase;
     margin-top: calc(var(--hh-professional-location-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--hh-professional-location-spacing) / 2);
diff --git a/static/scss/answers/cards/professional-standard.scss b/static/scss/answers/cards/professional-standard.scss
index ad7e8de34..aefe6e15c 100644
--- a/static/scss/answers/cards/professional-standard.scss
+++ b/static/scss/answers/cards/professional-standard.scss
@@ -23,7 +23,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
     flex-direction: column;
     width: 100%;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -94,7 +94,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
   &-phone--desktop {
     display: none;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: flex;
     }
@@ -104,7 +104,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
     @include Link;
     display: flex;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       display: none;
     }
@@ -115,7 +115,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
     text-transform: uppercase;
     margin-top: calc(var(--hh-professional-standard-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--hh-professional-standard-spacing) / 2);
diff --git a/static/scss/answers/cards/standard.scss b/static/scss/answers/cards/standard.scss
index b63563dad..7182a178e 100644
--- a/static/scss/answers/cards/standard.scss
+++ b/static/scss/answers/cards/standard.scss
@@ -20,7 +20,7 @@
     width: 100%;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       justify-content: space-between;
       flex-direction: row;
@@ -71,7 +71,7 @@
     text-transform: uppercase;
     margin-top: calc(var(--yxt-base-spacing) / 2);
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--yxt-base-spacing) / 2);
diff --git a/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss b/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss
index 98184c7f5..75f74d44d 100644
--- a/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss
+++ b/static/scss/answers/collapsible-filters/sdk-filter-overrides.scss
@@ -33,7 +33,7 @@
     }
   }
   
-  @media (max-width: $container-tablet-base) {
+  @include bplte(xs) {
     .yxt-SortOptions-option,
     .yxt-FilterOptions-option {
       margin: 8px 0px;
@@ -80,7 +80,7 @@
       margin-top: 8px;
       border-top: none;
   
-      @media (min-width: $container-tablet-base) {
+      @include bpgte(sm) {
         margin-top: 12px;
       }
     }
diff --git a/static/scss/answers/common/util/UtilityMixins.scss b/static/scss/answers/common/util/UtilityMixins.scss
index e9cbf07c8..453fb2899 100644
--- a/static/scss/answers/common/util/UtilityMixins.scss
+++ b/static/scss/answers/common/util/UtilityMixins.scss
@@ -12,13 +12,13 @@
     $mq: "";
 
     $maxes: (
-      xs: "(max-width: #{$screen-xs-max})",
+      xs: "(max-width: #{$breakpoint-mobile-max})",
       sm: "(max-width: #{$screen-sm-max})",
       md: "(max-width: #{$screen-md-max})"
     );
 
     $mins: (
-      sm: "(min-width: #{$screen-sm-min})",
+      sm: "(min-width: #{$breakpoint-mobile-min})",
       md: "(min-width: #{$screen-md-min})",
       lg: "(min-width: #{$screen-lg-min})"
     );
diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss
index ba47b71fa..24fdc39b1 100644
--- a/static/scss/answers/directanswercards/allfields-standard.scss
+++ b/static/scss/answers/directanswercards/allfields-standard.scss
@@ -2,7 +2,7 @@
 {
   margin-top: calc(var(--yxt-base-spacing) * 1.5);
 
-  @media (min-width: $breakpoint-mobile-min) {
+  @include bpgte(sm) {
     margin-top: calc(var(--yxt-base-spacing) * 2.35);
   }
 
@@ -87,7 +87,7 @@
     margin-top: calc(var(--yxt-base-spacing) / 2);
     justify-content: center;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--yxt-base-spacing) / 2);
diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss
index 12b592986..f9b9a1218 100644
--- a/static/scss/answers/directanswercards/documentsearch-standard.scss
+++ b/static/scss/answers/directanswercards/documentsearch-standard.scss
@@ -9,7 +9,7 @@
     color: var(--yxt-text-snippet-font-color);
   }
 
-  @media (min-width: $breakpoint-mobile-min) {
+  @include bpgte(sm) {
     margin-top: calc(var(--yxt-base-spacing) * 2.35);
   }
 
@@ -65,7 +65,7 @@
     margin-top: calc(var(--yxt-base-spacing) / 2);
     justify-content: center;
 
-    @media (min-width: $breakpoint-mobile-max)
+    @include bpgte(sm)
     {
       margin-top: 0;
       margin-left: calc(var(--yxt-base-spacing) / 2);
diff --git a/static/scss/answers/templates/universal-standard.scss b/static/scss/answers/templates/universal-standard.scss
index 2739af7b8..4a65f9370 100644
--- a/static/scss/answers/templates/universal-standard.scss
+++ b/static/scss/answers/templates/universal-standard.scss
@@ -35,7 +35,7 @@
       margin-top: calc(var(--yxt-base-spacing) * 1.5);
       margin-bottom: calc(var(--yxt-base-spacing) * -0.85);
 
-      @media (max-width: $breakpoint-mobile-max) {
+      @include bplte(xs) {
         margin-left: var(--yxt-base-spacing);
         margin-bottom: 0px;
       }
diff --git a/static/scss/answers/templates/vertical-grid.scss b/static/scss/answers/templates/vertical-grid.scss
index d1bb1c787..e0f688f90 100644
--- a/static/scss/answers/templates/vertical-grid.scss
+++ b/static/scss/answers/templates/vertical-grid.scss
@@ -64,7 +64,7 @@
       padding-top: calc(var(--yxt-base-spacing) * 1.5);
       flex-direction: column;
 
-      @media (max-width: $breakpoint-mobile-max)
+      @include bplte(xs)
       {
         padding-top: calc(var(--yxt-base-spacing) / 2)
       }
@@ -170,7 +170,7 @@
         margin-bottom: calc(var(--yxt-base-spacing) * 1.25);
         margin-left: var(--yxt-base-spacing);
 
-        @media (min-width: $breakpoint-mobile-min)  {
+        @include bpgte(sm)  {
           margin-left: calc(var(--yxt-base-spacing) * 0.25);
         }
       }
diff --git a/static/scss/answers/templates/vertical-standard.scss b/static/scss/answers/templates/vertical-standard.scss
index 63ebf1811..32536edf3 100644
--- a/static/scss/answers/templates/vertical-standard.scss
+++ b/static/scss/answers/templates/vertical-standard.scss
@@ -11,7 +11,7 @@
     padding-top: calc(var(--yxt-base-spacing) * 1.5);
     flex-direction: column;
 
-    @media (max-width: $breakpoint-mobile-max)
+    @include bplte(xs)
     {
       padding-top: calc(var(--yxt-base-spacing) / 2)
     }
@@ -134,7 +134,7 @@
       margin-bottom: calc(var(--yxt-base-spacing) * 1.5);
       margin-left: var(--yxt-base-spacing);
 
-      @media (min-width: $breakpoint-mobile-min) {
+      @include bpgte(sm) {
         margin-left: 0px;
       }
     }
diff --git a/static/scss/answers/theme.scss b/static/scss/answers/theme.scss
index ce32c5297..91b3d4cc3 100644
--- a/static/scss/answers/theme.scss
+++ b/static/scss/answers/theme.scss
@@ -156,6 +156,7 @@
 
     &-suggestionLink
     {
+      //This media query value is the same one that the SDK uses because the alternative verticals font sizes shrink below this breakpoint
       @media (min-width: 47.9375rem)
       {
         font-size: var(--yxt-font-size-md-lg);
diff --git a/static/scss/answers/universalsectiontemplates/common.scss b/static/scss/answers/universalsectiontemplates/common.scss
index 4536877c7..df5a30250 100644
--- a/static/scss/answers/universalsectiontemplates/common.scss
+++ b/static/scss/answers/universalsectiontemplates/common.scss
@@ -4,7 +4,7 @@
   width: 100%;
   margin-top: calc(var(--yxt-base-spacing) * 1.5);
 
-  @media (min-width: $breakpoint-mobile-min) {
+  @include bpgte(sm) {
     margin-top: calc(var(--yxt-base-spacing) * 2.35);
   }
 
@@ -219,7 +219,7 @@
       padding-left: 1px;
     }
 
-    @media (max-width: $breakpoint-mobile-max) {
+    @include bplte(xs) {
       margin-bottom: 0;
       & + & {
         border-top: 0;
@@ -231,7 +231,7 @@
 @mixin column-grid-items {
   background-color: var(--yxt-color-background-highlight);
 
-  @media (min-width: $breakpoint-mobile-min) {
+  @include bpgte(sm) {
     padding: calc(var(--yxt-base-spacing) * 3/4);
 
     border-left: var(--yxt-border-default);
diff --git a/static/scss/answers/universalsectiontemplates/grid-four-columns.scss b/static/scss/answers/universalsectiontemplates/grid-four-columns.scss
index 1cb2b741c..1fb5ce258 100644
--- a/static/scss/answers/universalsectiontemplates/grid-four-columns.scss
+++ b/static/scss/answers/universalsectiontemplates/grid-four-columns.scss
@@ -15,7 +15,7 @@
   {
     &--universal
     {
-      @media (min-width: $breakpoint-mobile-min) {
+      @include bpgte(sm) {
         margin: var(--hh-universal-grid-margin);
         flex-basis: var(--hh-universal-grid-four-columns-width);
         max-width: var(--hh-universal-grid-four-columns-width);
diff --git a/static/scss/answers/universalsectiontemplates/grid-three-columns.scss b/static/scss/answers/universalsectiontemplates/grid-three-columns.scss
index 04bed7d74..4e845821f 100644
--- a/static/scss/answers/universalsectiontemplates/grid-three-columns.scss
+++ b/static/scss/answers/universalsectiontemplates/grid-three-columns.scss
@@ -15,7 +15,7 @@
   {
     &--universal
     {
-      @media (min-width: $breakpoint-mobile-min) {
+      @include bpgte(sm) {
         margin: var(--hh-universal-grid-margin);
         flex-basis: var(--hh-universal-grid-three-columns-width);
         max-width: var(--hh-universal-grid-three-columns-width);
diff --git a/static/scss/answers/universalsectiontemplates/grid-two-columns.scss b/static/scss/answers/universalsectiontemplates/grid-two-columns.scss
index c5f071576..90b3ea078 100644
--- a/static/scss/answers/universalsectiontemplates/grid-two-columns.scss
+++ b/static/scss/answers/universalsectiontemplates/grid-two-columns.scss
@@ -15,7 +15,7 @@
   {
     &--universal
     {
-      @media (min-width: $breakpoint-mobile-min) {
+      @include bpgte(sm) {
         margin: var(--hh-universal-grid-margin);
         flex-basis: var(--hh-universal-grid-two-columns-width);
         max-width: var(--hh-universal-grid-two-columns-width);
diff --git a/test-site/public/overlay.html b/test-site/public/overlay.html
index d7dc1a930..064489ddd 100644
--- a/test-site/public/overlay.html
+++ b/test-site/public/overlay.html
@@ -22,4 +22,4 @@
   { text: "Do you have gift cards?", },
   { text: "I want a snack now", },
 ]
-};</script><script async src="./overlay.js"></script></head><body></body></html>
\ No newline at end of file
+};</script><script async="" src="./overlay.js"></script></head><body></body></html>
\ No newline at end of file