Fixed mobile version of checkout progress bar

Author: nidhigupta13-ey

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

@@ -10,13 +10,16 @@
 @checkout-progress-bar__font-size: 18px;
 @checkout-progress-bar__font-weight: @font-weight__light;
 @checkout-progress-bar__margin: @indent__base;
+@checkout-progress-bar__margin__mobile: 30px;
 
 @checkout-progress-bar-item__background-color: @color-gray-middle1;
 @checkout-progress-bar-item__border-radius: 6px;
 @checkout-progress-bar-item__color: @color-gray40;
 @checkout-progress-bar-item__margin: @indent__s;
 @checkout-progress-bar-item__transition: background .3s;
 @checkout-progress-bar-item__width: 185px;
+@checkout-progress-bar-item__width__mobile: 165px;
+@checkout-progress-bar-item__width__mobile_small: 125px;
 
 @checkout-progress-bar-item__active__background-color: @active__color;
 @checkout-progress-bar-item__active__color: @primary__color;
@@ -57,8 +60,6 @@
 //  Desktop
 //  _____________________________________________
 
-.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
-
     .opc-progress-bar {
         .lib-css(margin, 0 0 @checkout-progress-bar__margin);
         counter-reset: i;
@@ -195,4 +196,27 @@
             }
         }
     }
+
+//
+// Mobile max width 600px
+//
+@media only screen and (max-width: 600px) {
+    .opc-progress-bar {
+        .lib-css(margin, 0 0 @checkout-progress-bar__margin__mobile);
+        counter-reset: i;
+        display: block;
+        font-size: 0;
+    }
+    .opc-progress-bar-item {
+        .lib-css(width, @checkout-progress-bar-item__width__mobile);
+    }
+}
+
+//
+// Mobile max width 320px and 280px
+//
+@media (min-width: 280px) and (max-width: 320px) {
+    .opc-progress-bar-item {
+        .lib-css(width, @checkout-progress-bar-item__width__mobile_small);
+    }
 }