fix(css): update responsive display media queries (#18601)

BREAKING CHANGES

The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of that breakpoint (for `.ion-hide-{breakpoint}-down` classes) the maximum of the media query will be the minimum of that breakpoint. 

fixes #18600

core/src/components/menu/test/basic/index.html

@@ -93,7 +93,7 @@
     }
   </style>
 
-  <script>
+  <script type="module">
     const menuCtrl = document.querySelector('ion-menu-controller');
 
     async function openFirst() {

core/src/css/display.scss

@@ -10,7 +10,7 @@
   display: none !important;
 }
 
-// Adds hidden attributes
+// Adds hidden classes
 @each $breakpoint in map-keys($screen-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 

core/src/themes/ionic.mixins.scss

@@ -111,14 +111,14 @@
   @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
+// Maximum breakpoint width. Null for the smallest (first) breakpoint.
+// The maximum value is calculated as the minimum of the current one.
 //
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
+//    576px
 @function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+  $min: breakpoint-min($name, $breakpoints);
+  @return if($min, breakpoint-min($name, $breakpoints), null);
 }
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.