Changed the media conditions as per review comments

Author: nidhigupta13-ey

app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_progress-bar.less

@@ -54,11 +54,6 @@
         &:extend(.abs-reset-list all);
         display: none;
     }
-}
-
-//
-//  Desktop
-//  _____________________________________________
 
     .opc-progress-bar {
         .lib-css(margin, 0 0 @checkout-progress-bar__margin);
@@ -106,12 +101,12 @@
             word-wrap: break-word;
 
             .lib-typography(
-            @_color: @checkout-progress-bar-item__color,
-            @_font-family: false,
-            @_font-size: @checkout-progress-bar__font-size,
-            @_font-style: false,
-            @_font-weight: @checkout-progress-bar__font-weight,
-            @_line-height: false
+                @_color: @checkout-progress-bar-item__color,
+                @_font-family: false,
+                @_font-size: @checkout-progress-bar__font-size,
+                @_font-style: false,
+                @_font-weight: @checkout-progress-bar__font-weight,
+                @_line-height: false
             );
 
             &:before, // Item element
@@ -138,12 +133,12 @@
                 content: counter(i);
                 counter-increment: i;
                 .lib-typography(
-                @_color: @checkout-progress-bar-item-element-inner__color,
-                @_font-family: false,
-                @_font-size: @checkout-progress-bar__font-size,
-                @_font-style: false,
-                @_font-weight: @font-weight__semibold,
-                @_line-height: false
+                    @_color: @checkout-progress-bar-item-element-inner__color,
+                    @_font-family: false,
+                    @_font-size: @checkout-progress-bar__font-size,
+                    @_font-style: false,
+                    @_font-weight: @font-weight__semibold,
+                    @_line-height: false
                 );
             }
         }
@@ -196,11 +191,12 @@
             }
         }
     }
+}
 
 //
-// Mobile max width 600px
+// Mobile
 //
-@media only screen and (max-width: 600px) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
     .opc-progress-bar {
         .lib-css(margin, 0 0 @checkout-progress-bar__margin__mobile);
         counter-reset: i;
@@ -213,9 +209,9 @@
 }
 
 //
-// Mobile max width 320px and 280px
+// Mobile with extra small screen size
 //
-@media (min-width: 280px) and (max-width: 320px) {
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
     .opc-progress-bar-item {
         .lib-css(width, @checkout-progress-bar-item__width__mobile_small);
     }