refactor: Update boostrap breakpoints and use them for u-hide-for-mob…

…ile (#2778)

assets/css/bootstrap/_variable_overrides.scss

@@ -16,3 +16,21 @@ $ui-alert: semantic.$ui-alert;
 $service-alert: semantic.$service-alert;
 $light: new_tokens.$gray-50;
 $dark: new_tokens.$gray-900;
+
+// These breakpoints are overridden in order to match with our old set
+// of breakpoints, defined in _skate_ui.scss. Our long-term goal is to
+// replace our "custom" breakpoint system with these bootstrap
+// breakpoints, and then possibly to change these values to match our
+// forward-looking designs.
+$grid-breakpoints: (
+  xs: 0,
+
+  // sm - Breakpoint between mobile and tablet
+  sm: 480px,
+
+  // md - Breakpoint between tablet and desktop
+  md: 800px,
+
+  // lg - Breakpoint between desktop and wide-screen desktop
+  lg: 1340px,
+);

assets/css/utilities/_hideable.scss

@@ -11,7 +11,7 @@
 }
 
 .u-hide-for-mobile {
-  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+  @include media-breakpoint-down(md) {
     display: none;
   }
 }