diff --git a/src/shared/components/Settings/Account/LinkedAccount/styles.scss b/src/shared/components/Settings/Account/LinkedAccount/styles.scss
index e3f3261082..9a19facde4 100644
--- a/src/shared/components/Settings/Account/LinkedAccount/styles.scss
+++ b/src/shared/components/Settings/Account/LinkedAccount/styles.scss
@@ -10,7 +10,7 @@
   justify-content: space-between;
   //margin-top: 10px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     flex-flow: row wrap;
     flex-direction: row;
   }
@@ -230,7 +230,7 @@
 
   .web-link {
     .form-container-default {
-      @include xs-to-sm {
+      @include upto-sm {
         display: none;
       }
 
@@ -303,7 +303,7 @@
     .form-container-mobile {
       display: none;
 
-      @include xs-to-sm {
+      @include upto-sm {
         border: 0;
         border-radius: 0;
         display: flex;
@@ -336,7 +336,7 @@
         font-weight: 400;
         color: $tc-black;
 
-        @include xs-to-sm {
+        @include upto-sm {
           margin-bottom: 20px;
         }
       }
@@ -347,7 +347,7 @@
         margin-bottom: 20px;
         align-content: space-between;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
           display: block;
           margin-bottom: 0;
@@ -358,7 +358,7 @@
           flex-direction: column;
           margin-right: 10px;
 
-          @include xs-to-sm {
+          @include upto-sm {
             display: block;
             padding-bottom: 10px;
           }
@@ -425,7 +425,7 @@
           }
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -561,7 +561,7 @@
   flex-flow: row wrap;
   border-bottom: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: block;
     padding: 0 20px;
   }
@@ -795,7 +795,7 @@
     }
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 20px;
   }
 }
@@ -824,7 +824,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -839,7 +839,7 @@
     margin-bottom: 30px;
     margin-top: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -848,7 +848,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
     width: 156px;
   }
@@ -895,7 +895,7 @@
       width: 155px;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Account/MyAccount/styles.scss b/src/shared/components/Settings/Account/MyAccount/styles.scss
index f94ebe04a3..63a66a806a 100644
--- a/src/shared/components/Settings/Account/MyAccount/styles.scss
+++ b/src/shared/components/Settings/Account/MyAccount/styles.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
   align-items: left;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 20px;
   }
 
@@ -22,7 +22,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -37,7 +37,7 @@
     margin-top: 10px;
     margin-bottom: 30px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -63,7 +63,7 @@
   .form-default {
     display: block;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -71,7 +71,7 @@
   .form-mobile {
     display: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
 
       .row {
@@ -156,7 +156,7 @@
     justify-content: flex-start;
 
     .field {
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -169,7 +169,7 @@
         font-weight: 700;
         color: $tc-gray-80;
 
-        @include xs-to-sm {
+        @include upto-sm {
           @include roboto-regular;
 
           font-size: 12px;
@@ -333,7 +333,7 @@
   .password-section {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -506,7 +506,7 @@ $tips-background: $tc-gray-neutral-light;
   text-align: left;
   margin-top: 10px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 0;
     margin-bottom: 10px;
     margin-left: auto;
@@ -573,7 +573,7 @@ $tips-background: $tc-gray-neutral-light;
     display: block;
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
 
     &.mobile {
diff --git a/src/shared/components/Settings/Account/styles.scss b/src/shared/components/Settings/Account/styles.scss
index eb5d0294a2..41006f3471 100644
--- a/src/shared/components/Settings/Account/styles.scss
+++ b/src/shared/components/Settings/Account/styles.scss
@@ -9,11 +9,11 @@
   .mobile-view {
     display: none;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       width: 100%;
     }
@@ -25,13 +25,13 @@
     padding: 30px;
     border-bottom-left-radius: 6px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       width: 90px;
       padding-right: 30px;
       margin-right: 0;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -40,7 +40,7 @@
     flex: 1;
     padding: 30px 80px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Preferences/Email/styles.scss b/src/shared/components/Settings/Preferences/Email/styles.scss
index bd8a0a2d9e..e0b07a58f1 100644
--- a/src/shared/components/Settings/Preferences/Email/styles.scss
+++ b/src/shared/components/Settings/Preferences/Email/styles.scss
@@ -6,7 +6,7 @@
 
     margin-bottom: 25px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       font-size: 20px;
       line-height: 30px;
       margin: 20px;
@@ -23,7 +23,7 @@
     margin-bottom: 30px;
     margin-top: 5px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Preferences/Personalization/styles.scss b/src/shared/components/Settings/Preferences/Personalization/styles.scss
index a0e225914d..1ad87e11cb 100644
--- a/src/shared/components/Settings/Preferences/Personalization/styles.scss
+++ b/src/shared/components/Settings/Preferences/Personalization/styles.scss
@@ -3,11 +3,11 @@
 .Personalization {
   margin-bottom: 60px;
 
-  @include md-to-lg {
+  @include from-sm-to-lg {
     margin-bottom: 0;
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 
@@ -16,7 +16,7 @@
 
     margin-bottom: 25px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       font-size: 20px;
       line-height: 30px;
       margin: 20px;
@@ -27,7 +27,7 @@
     border-top: 1px solid $tc-gray-neutral-dark;
     min-height: 474px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       min-height: 1px;
     }
   }
diff --git a/src/shared/components/Settings/Preferences/styles.scss b/src/shared/components/Settings/Preferences/styles.scss
index 9f769a1b19..ebccde189f 100644
--- a/src/shared/components/Settings/Preferences/styles.scss
+++ b/src/shared/components/Settings/Preferences/styles.scss
@@ -5,18 +5,18 @@
   flex-direction: row;
   box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 0;
   }
 
   .mobile-view {
     display: none;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       width: 100%;
     }
@@ -28,13 +28,13 @@
     padding: 30px;
     border-bottom-left-radius: 6px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       width: 90px;
       padding-right: 30px;
       margin-right: 0;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -43,7 +43,7 @@
     flex: 1;
     padding: 30px 80px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
index 71087ad1d2..d326350d28 100644
--- a/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
+++ b/src/shared/components/Settings/Profile/BasicInfo/ImageInput/styles.scss
@@ -1,7 +1,7 @@
 @import "../../../style";
 
 .image {
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 
@@ -12,7 +12,7 @@
     p.handle {
       display: none;
 
-      @include xs-to-sm {
+      @include upto-sm {
         @include roboto-regular;
 
         display: block;
@@ -31,7 +31,7 @@
       height: 120px;
       padding: 2px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         width: 80px;
         height: 80px;
         margin-right: 10px;
diff --git a/src/shared/components/Settings/Profile/BasicInfo/styles.scss b/src/shared/components/Settings/Profile/BasicInfo/styles.scss
index 559b88103c..03fb1cf1a4 100644
--- a/src/shared/components/Settings/Profile/BasicInfo/styles.scss
+++ b/src/shared/components/Settings/Profile/BasicInfo/styles.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 20px;
     border-bottom: 1px solid $tc-gray-10;
   }
@@ -18,7 +18,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -46,7 +46,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -137,7 +137,7 @@
 .about-me-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     align-items: flex-start;
   }
@@ -147,11 +147,11 @@
   .user-icon {
     margin-right: 40px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -187,11 +187,11 @@
       color: $tc-black;
       margin-bottom: 20px;
 
-      @include md-to-lg {
+      @include from-sm-to-lg {
         display: none;
       }
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: none;
       }
     }
@@ -200,7 +200,7 @@
       display: flex;
       margin-bottom: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         width: 100%;
         display: block;
         margin-bottom: 0;
@@ -212,7 +212,7 @@
         flex-direction: column;
         margin-right: 10px;
 
-        @include xs-to-sm {
+        @include upto-sm {
           display: block;
           margin-right: 0;
           padding-bottom: 10px;
@@ -255,7 +255,7 @@
       color: $tc-black;
       border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-      @include xs-to-sm {
+      @include upto-sm {
         margin-top: 5px;
       }
     }
@@ -267,7 +267,7 @@
     .mb-user-card {
       display: none;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         margin-bottom: 15px;
       }
@@ -278,18 +278,18 @@
       flex-direction: row;
       margin-bottom: 10px;
 
-      @include md-to-lg {
+      @include from-sm-to-lg {
         margin-bottom: 15px;
       }
 
-      @include xs-to-sm {
+      @include upto-sm {
         margin-bottom: 0;
       }
 
       .img-container {
         display: none;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           display: block;
         }
       }
@@ -298,7 +298,7 @@
         display: block;
         width: 100%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           display: flex;
           flex-direction: column;
         }
@@ -307,7 +307,7 @@
       p.user-handle {
         display: none;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           @include roboto-regular;
 
           display: block;
@@ -414,7 +414,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -430,7 +430,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Community/Item/styles.scss b/src/shared/components/Settings/Profile/Community/Item/styles.scss
index b8800f6c9e..e4b5d29296 100644
--- a/src/shared/components/Settings/Profile/Community/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Community/Item/styles.scss
@@ -26,7 +26,7 @@
   margin-top: auto;
   margin-bottom: auto;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -36,7 +36,7 @@
   flex-direction: column;
   flex: 1;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -61,7 +61,7 @@
 .mobile-view {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
diff --git a/src/shared/components/Settings/Profile/Community/styles.scss b/src/shared/components/Settings/Profile/Community/styles.scss
index 6707a2d95f..7d891eb427 100644
--- a/src/shared/components/Settings/Profile/Community/styles.scss
+++ b/src/shared/components/Settings/Profile/Community/styles.scss
@@ -4,7 +4,7 @@
   h1 {
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 70px;
       margin-bottom: 0;
       font-size: 20px;
@@ -14,11 +14,11 @@
 
   margin-bottom: 40px;
 
-  @include md-to-lg {
+  @include from-sm-to-lg {
     margin-bottom: 0;
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 
@@ -27,7 +27,7 @@
 
     margin-bottom: 25px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       font-size: 20px;
       line-height: 30px;
       margin: 20px;
@@ -44,7 +44,7 @@
     margin-bottom: 30px;
     margin-top: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Education/List/Item/styles.scss b/src/shared/components/Settings/Profile/Education/List/Item/styles.scss
index 1fee69d8b1..1f9610afa3 100644
--- a/src/shared/components/Settings/Profile/Education/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Education/List/Item/styles.scss
@@ -44,7 +44,7 @@
   margin-bottom: 10px;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 }
@@ -54,7 +54,7 @@
   font-weight: 400;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -62,7 +62,7 @@
 .parameter-second-line-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     color: $tc-gray-50;
@@ -85,7 +85,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -98,7 +98,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Education/List/styles.scss b/src/shared/components/Settings/Profile/Education/List/styles.scss
index a69a09f21e..f053c408f8 100644
--- a/src/shared/components/Settings/Profile/Education/List/styles.scss
+++ b/src/shared/components/Settings/Profile/Education/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Education/styles.scss b/src/shared/components/Settings/Profile/Education/styles.scss
index 4bfaa0e82a..8d8827ffd2 100644
--- a/src/shared/components/Settings/Profile/Education/styles.scss
+++ b/src/shared/components/Settings/Profile/Education/styles.scss
@@ -13,7 +13,7 @@ $checkbox-bg-selected: $tc-dark-blue;
   flex-direction: column;
   align-items: left;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding-bottom: 0;
   }
 
@@ -26,7 +26,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -53,7 +53,7 @@ $checkbox-bg-selected: $tc-dark-blue;
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -93,7 +93,7 @@ label {
   display: inline-block;
   bottom: 0;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 10px;
   }
 
@@ -187,7 +187,7 @@ label {
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -204,7 +204,7 @@ label {
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -216,7 +216,7 @@ label {
     align-content: space-between;
     width: 100%;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       margin-bottom: 0;
     }
@@ -230,7 +230,7 @@ label {
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -256,7 +256,7 @@ label {
       &.col-1 {
         width: 23%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -264,7 +264,7 @@ label {
       &.col-2 {
         width: 51%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -272,7 +272,7 @@ label {
       &.col-3 {
         width: 26%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -280,7 +280,7 @@ label {
       &.col-date {
         width: 175px;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -288,7 +288,7 @@ label {
       &.col-checkbox {
         position: relative;
 
-        @include xs-to-sm {
+        @include upto-sm {
           top: 25px;
         }
       }
@@ -307,7 +307,7 @@ label {
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -316,7 +316,7 @@ label {
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 30px;
   }
 
@@ -331,7 +331,7 @@ label {
     padding: 0;
     width: 250px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -352,7 +352,7 @@ label {
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -368,7 +368,7 @@ label {
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss b/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss
index 3e1a14f888..99e35dde9c 100644
--- a/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Hobby/List/Item/styles.scss
@@ -44,7 +44,7 @@
   color: $tc-black;
   margin-bottom: 10px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 }
@@ -66,7 +66,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -79,7 +79,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Hobby/List/styles.scss b/src/shared/components/Settings/Profile/Hobby/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Profile/Hobby/List/styles.scss
+++ b/src/shared/components/Settings/Profile/Hobby/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Hobby/styles.scss b/src/shared/components/Settings/Profile/Hobby/styles.scss
index 4dd3377418..6c122aa38d 100644
--- a/src/shared/components/Settings/Profile/Hobby/styles.scss
+++ b/src/shared/components/Settings/Profile/Hobby/styles.scss
@@ -18,7 +18,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -45,7 +45,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -121,7 +121,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     border-radius: 6px;
@@ -139,7 +139,7 @@
     color: $tc-black;
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -150,7 +150,7 @@
     margin-bottom: 10px;
     align-content: space-between;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 100%;
       display: block;
       margin-bottom: 0;
@@ -162,7 +162,7 @@
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -187,11 +187,11 @@
       &.row-1 {
         width: 280px;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 383px;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -245,7 +245,7 @@
     min-width: 100%;
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
   }
diff --git a/src/shared/components/Settings/Profile/ImageInput/styles.scss b/src/shared/components/Settings/Profile/ImageInput/styles.scss
index bb764deef3..6fe19ed329 100644
--- a/src/shared/components/Settings/Profile/ImageInput/styles.scss
+++ b/src/shared/components/Settings/Profile/ImageInput/styles.scss
@@ -1,7 +1,7 @@
 @import "../../style";
 
 .image {
-  @include md-to-lg {
+  @include from-sm-to-lg {
     margin-right: 20px;
   }
 
@@ -10,14 +10,14 @@
     flex-direction: column;
     align-items: center;
 
-    @include xs-to-sm {
+    @include upto-sm {
       flex-direction: row;
     }
 
     p.handle {
       display: none;
 
-      @include xs-to-sm {
+      @include upto-sm {
         @include roboto-regular;
 
         display: block;
@@ -37,7 +37,7 @@
       height: 120px;
       padding: 2px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         width: 80px;
         height: 80px;
         margin-right: 10px;
@@ -63,7 +63,7 @@
         border: 1px solid #47474f;
         box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 95px;
         }
       }
@@ -77,7 +77,7 @@
         min-height: 30px;
         padding: 0;
 
-        @include xs-to-sm {
+        @include upto-sm {
           display: block;
           margin-left: 6px;
         }
diff --git a/src/shared/components/Settings/Profile/Language/List/Item/styles.scss b/src/shared/components/Settings/Profile/Language/List/Item/styles.scss
index 7a590b515d..8413d7a58e 100644
--- a/src/shared/components/Settings/Profile/Language/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Language/List/Item/styles.scss
@@ -37,7 +37,7 @@
   text-transform: capitalize;
   margin-right: 20px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-right: 0;
   }
 }
@@ -48,7 +48,7 @@
   margin-bottom: 10px;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 }
@@ -57,7 +57,7 @@
   color: $tc-gray-50;
   font-weight: 400;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -65,7 +65,7 @@
 .parameter-second-line-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     color: $tc-gray-50;
@@ -85,7 +85,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -98,7 +98,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Language/List/styles.scss b/src/shared/components/Settings/Profile/Language/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Profile/Language/List/styles.scss
+++ b/src/shared/components/Settings/Profile/Language/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Language/styles.scss b/src/shared/components/Settings/Profile/Language/styles.scss
index 2bfe7e67fa..8c47836e3e 100644
--- a/src/shared/components/Settings/Profile/Language/styles.scss
+++ b/src/shared/components/Settings/Profile/Language/styles.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
   align-items: left;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding-bottom: 0;
   }
 
@@ -22,7 +22,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -49,7 +49,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -100,7 +100,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -117,7 +117,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -129,7 +129,7 @@
     align-content: space-between;
     width: 100%;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       margin-bottom: 0;
     }
@@ -140,7 +140,7 @@
       margin-right: 10px;
       align-content: space-between;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -158,7 +158,7 @@
       &.col-1 {
         width: 48%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -166,7 +166,7 @@
       &.col-2 {
         width: 26%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -189,7 +189,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -198,7 +198,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -213,7 +213,7 @@
     padding: 0;
     width: 250px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -234,7 +234,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -250,7 +250,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss b/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
index 16005cb598..620ab220fa 100644
--- a/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Organization/List/Item/styles.scss
@@ -44,7 +44,7 @@
   color: $tc-black;
   margin-bottom: 10px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 }
@@ -54,7 +54,7 @@
   font-weight: 400;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -62,7 +62,7 @@
 .parameter-second-line-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     color: $tc-gray-50;
@@ -95,7 +95,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Organization/List/styles.scss b/src/shared/components/Settings/Profile/Organization/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Profile/Organization/List/styles.scss
+++ b/src/shared/components/Settings/Profile/Organization/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Organization/styles.scss b/src/shared/components/Settings/Profile/Organization/styles.scss
index a97f24094f..dac07d0c69 100644
--- a/src/shared/components/Settings/Profile/Organization/styles.scss
+++ b/src/shared/components/Settings/Profile/Organization/styles.scss
@@ -18,7 +18,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -45,7 +45,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -96,7 +96,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -113,7 +113,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -124,7 +124,7 @@
     margin-bottom: 20px;
     align-content: space-between;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 100%;
       display: block;
       margin-bottom: 0;
@@ -139,7 +139,7 @@
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -166,7 +166,7 @@
           width: 73%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -178,7 +178,7 @@
           width: 27%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -190,7 +190,7 @@
           width: 44%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -202,7 +202,7 @@
           width: 27%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -221,7 +221,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -234,7 +234,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -251,7 +251,7 @@
       padding: 0 0;
       width: 250px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         width: 156px;
       }
     }
@@ -269,7 +269,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
diff --git a/src/shared/components/Settings/Profile/Skills/styles.scss b/src/shared/components/Settings/Profile/Skills/styles.scss
index 5ce048e8ae..2e92f47c13 100644
--- a/src/shared/components/Settings/Profile/Skills/styles.scss
+++ b/src/shared/components/Settings/Profile/Skills/styles.scss
@@ -9,7 +9,7 @@
   flex-direction: column;
   align-items: left;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding-bottom: 0;
     border-bottom: 1px solid #c3c3c8;
 
@@ -27,7 +27,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -55,7 +55,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -106,7 +106,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     border-bottom: 1px solid #c3c3c8;
@@ -128,7 +128,7 @@
     line-height: 30px;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -140,7 +140,7 @@
     align-content: space-between;
     width: 100%;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       margin-bottom: 0;
     }
@@ -153,7 +153,7 @@
       align-content: space-between;
       width: 100%;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -182,7 +182,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -196,7 +196,7 @@
     padding: 0;
     width: 200px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -220,7 +220,7 @@
       margin: 0 -15px;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 300px;
       padding: 0 22px;
       margin: 0 -8px;
@@ -235,12 +235,12 @@
       margin: 0 15px 75px;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin: 0 8px 75px;
     }
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     &.hide {
       display: none;
     }
@@ -362,7 +362,7 @@
 .mobile-buttons {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     justify-content: center;
     margin-bottom: 20px;
@@ -398,7 +398,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -414,7 +414,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
@@ -427,7 +427,7 @@
 .skill-container .form-container .row .field :global .Select-placeholder {
   color: $tc-gray-50;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
index d62a40f078..14afc75613 100644
--- a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
@@ -44,7 +44,7 @@
   margin-bottom: 10px;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-bottom: 0;
   }
 }
@@ -54,7 +54,7 @@
   font-weight: 400;
   word-break: break-all;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 }
@@ -62,7 +62,7 @@
 .parameter-second-line-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     color: $tc-gray-50;
@@ -86,7 +86,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -99,7 +99,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Work/List/styles.scss b/src/shared/components/Settings/Profile/Work/List/styles.scss
index a69a09f21e..f053c408f8 100644
--- a/src/shared/components/Settings/Profile/Work/List/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index 2d6015bc55..cd87cb90dd 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -22,7 +22,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -49,7 +49,7 @@ $checkbox-bg-selected: $tc-dark-blue;
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -100,7 +100,7 @@ $checkbox-bg-selected: $tc-dark-blue;
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -117,7 +117,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -132,7 +132,7 @@ $checkbox-bg-selected: $tc-dark-blue;
       margin-right: 0;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       margin-bottom: 0;
     }
@@ -143,7 +143,7 @@ $checkbox-bg-selected: $tc-dark-blue;
       margin-right: 10px;
       align-content: space-between;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -166,11 +166,11 @@ $checkbox-bg-selected: $tc-dark-blue;
       &.col-1 {
         width: 42%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 46%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -178,11 +178,11 @@ $checkbox-bg-selected: $tc-dark-blue;
       &.col-2 {
         width: 32%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 27%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -190,11 +190,11 @@ $checkbox-bg-selected: $tc-dark-blue;
       &.col-3 {
         width: 26%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 27%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -202,11 +202,11 @@ $checkbox-bg-selected: $tc-dark-blue;
       &.col-city {
         width: 150px;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 46%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -214,11 +214,11 @@ $checkbox-bg-selected: $tc-dark-blue;
       &.col-date {
         width: 160px;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 27%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -237,7 +237,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -246,7 +246,7 @@ $checkbox-bg-selected: $tc-dark-blue;
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -261,7 +261,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     padding: 0;
     width: 250px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -282,7 +282,7 @@ $checkbox-bg-selected: $tc-dark-blue;
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
diff --git a/src/shared/components/Settings/Profile/index.jsx b/src/shared/components/Settings/Profile/index.jsx
index 7e64f1ec66..7662db1006 100644
--- a/src/shared/components/Settings/Profile/index.jsx
+++ b/src/shared/components/Settings/Profile/index.jsx
@@ -33,7 +33,7 @@ class Profile extends React.Component {
     this.previousSelectedTab = null;
     this.state = {
       isMobileView: false,
-      screenSM: 768,
+      screenSM: 767,
     };
 
     this.updatePredicate = this.updatePredicate.bind(this);
diff --git a/src/shared/components/Settings/Profile/styles.scss b/src/shared/components/Settings/Profile/styles.scss
index 55c8f8a500..5b611afd0f 100644
--- a/src/shared/components/Settings/Profile/styles.scss
+++ b/src/shared/components/Settings/Profile/styles.scss
@@ -5,7 +5,7 @@
   flex-direction: row;
   box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 0;
   }
 
@@ -15,13 +15,13 @@
     padding: 30px;
     border-bottom-left-radius: 6px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       width: 90px;
       padding-right: 30px;
       margin-right: 0;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -30,7 +30,7 @@
     flex: 1;
     padding: 30px 80px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/SideBar/SideItem/styles.scss b/src/shared/components/Settings/SideBar/SideItem/styles.scss
index 277e19dfcf..14d6b943c6 100644
--- a/src/shared/components/Settings/SideBar/SideItem/styles.scss
+++ b/src/shared/components/Settings/SideBar/SideItem/styles.scss
@@ -14,7 +14,7 @@ a.SideItem {
   align-items: center;
   border-radius: 4px;
 
-  @include md-to-lg {
+  @include from-sm-to-lg {
     width: 60px;
     justify-content: center;
     padding: 0;
@@ -25,7 +25,7 @@ a.SideItem {
     width: 34px;
     max-height: 30px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       margin-right: 0;
     }
   }
@@ -44,13 +44,13 @@ a.SideItem {
     justify-content: center;
     margin-right: 12px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       margin-right: 0;
     }
   }
 
   span.name {
-    @include md-to-lg {
+    @include from-sm-to-lg {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/SideBar/styles.scss b/src/shared/components/Settings/SideBar/styles.scss
index c70a0edf9e..6ffe48a885 100644
--- a/src/shared/components/Settings/SideBar/styles.scss
+++ b/src/shared/components/Settings/SideBar/styles.scss
@@ -5,7 +5,7 @@ nav.side-tab ul {
   flex-direction: column;
   justify-content: center;
 
-  @include md-to-lg {
+  @include from-sm-to-lg {
     align-items: center;
   }
 
@@ -13,7 +13,7 @@ nav.side-tab ul {
     height: 45px;
     margin-bottom: 20px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       height: 50px;
       margin-bottom: 10px;
     }
diff --git a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
index b77ad849e8..e2b04eea82 100644
--- a/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/Item/styles.scss
@@ -65,7 +65,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -78,7 +78,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Devices/List/styles.scss b/src/shared/components/Settings/Tools/Devices/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Tools/Devices/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Devices/styles.scss b/src/shared/components/Settings/Tools/Devices/styles.scss
index 96ce8df381..2ff6e2fb51 100644
--- a/src/shared/components/Settings/Tools/Devices/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/styles.scss
@@ -13,7 +13,7 @@
     color: $tc-black;
     margin-bottom: 30px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -40,7 +40,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -91,7 +91,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: flex;
     flex-direction: column;
     border: 0;
@@ -108,7 +108,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -121,7 +121,7 @@
     align-items: center;
     width: 100%;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       margin-bottom: 0;
     }
@@ -133,7 +133,7 @@
       margin-right: 10px;
       align-content: space-between;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -151,7 +151,7 @@
       &.col-1 {
         width: 35%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -159,7 +159,7 @@
       &.col-2 {
         width: 50%;
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -181,7 +181,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -190,7 +190,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -206,7 +206,7 @@
     padding: 0;
     width: 199px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -227,7 +227,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     //margin-top: 5px;
   }
 }
@@ -243,7 +243,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
index 5d72b52efc..744b398be6 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/Item/styles.scss
@@ -60,7 +60,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -73,7 +73,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
index 18c6554d8c..3b58588951 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
@@ -14,7 +14,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -41,7 +41,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -92,7 +92,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -110,7 +110,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -121,7 +121,7 @@
     margin-bottom: 20px;
     align-content: space-between;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 100%;
       display: block;
       margin-bottom: 0;
@@ -133,7 +133,7 @@
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -151,11 +151,11 @@
       &.col-1 {
         width: 34%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 45%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -163,11 +163,11 @@
       &.col-2 {
         width: 66%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 55%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -189,7 +189,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -198,7 +198,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -214,7 +214,7 @@
     padding: 0;
     width: 300px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -235,7 +235,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -251,7 +251,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
index 678c76a0db..f081e3523a 100644
--- a/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/List/Item/styles.scss
@@ -60,7 +60,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -73,7 +73,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Software/List/styles.scss b/src/shared/components/Settings/Tools/Software/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Tools/Software/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Software/styles.scss b/src/shared/components/Settings/Tools/Software/styles.scss
index da152a741c..6d7537bb7c 100644
--- a/src/shared/components/Settings/Tools/Software/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/styles.scss
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding-bottom: 0;
   }
 
@@ -17,7 +17,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -44,7 +44,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -95,7 +95,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -112,7 +112,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -123,7 +123,7 @@
     margin-bottom: 20px;
     align-content: space-between;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 100%;
       display: block;
       margin-bottom: 0;
@@ -135,7 +135,7 @@
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -153,11 +153,11 @@
       &.col-1 {
         width: 45%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 42%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -165,11 +165,11 @@
       &.col-2 {
         width: 55%;
 
-        @include md-to-lg {
+        @include from-sm-to-lg {
           width: 58%;
         }
 
-        @include xs-to-sm {
+        @include upto-sm {
           width: 100%;
         }
       }
@@ -192,7 +192,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -201,7 +201,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -217,7 +217,7 @@
     padding: 0;
     width: 214px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 156px;
     }
   }
@@ -238,7 +238,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
@@ -254,7 +254,7 @@
     height: 38px;
     line-height: 40px !important;
 
-    @include xs-to-sm {
+    @include upto-sm {
       line-height: 38px !important;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
index e6d29af13e..2fc5d9113d 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/Item/styles.scss
@@ -60,7 +60,7 @@
   img {
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 0;
     }
   }
@@ -73,7 +73,7 @@
     font-weight: 400;
     color: $tc-gray-50;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
index 1063b42b48..c7e24fd6ca 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/List/styles.scss
@@ -8,7 +8,7 @@
   &.active {
     margin-top: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 0;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Subscriptions/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
index fc8ebb2f92..2f484d67b5 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
@@ -14,7 +14,7 @@
     color: $tc-black;
     margin-bottom: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -41,7 +41,7 @@
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -92,7 +92,7 @@
 .form-container-mobile {
   display: none;
 
-  @include xs-to-sm {
+  @include upto-sm {
     border: 0;
     border-radius: 0;
     display: flex;
@@ -110,7 +110,7 @@
     font-weight: 400;
     color: $tc-black;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-bottom: 20px;
     }
   }
@@ -121,7 +121,7 @@
     margin-bottom: 20px;
     align-content: space-between;
 
-    @include xs-to-sm {
+    @include upto-sm {
       width: 100%;
       display: block;
       margin-bottom: 0;
@@ -133,7 +133,7 @@
       flex-direction: column;
       margin-right: 10px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -173,7 +173,7 @@
     border: 1px solid $tc-gray-20;
     border-radius: $corner-radius * 2 $corner-radius * 2 $corner-radius * 2 $corner-radius * 2;
 
-    @include xs-to-sm {
+    @include upto-sm {
       margin-top: 5px;
     }
   }
@@ -182,7 +182,7 @@
 .button-save {
   align-self: center;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 10px;
   }
 
@@ -198,7 +198,7 @@
       padding: 0 0;
       width: 200px;
 
-      @include xs-to-sm {
+      @include upto-sm {
         width: 156px;
       }
 
@@ -218,7 +218,7 @@
   color: $tc-gray-80;
   font-size: 15px;
 
-  @include xs-to-sm {
+  @include upto-sm {
     margin-top: 5px;
   }
 }
diff --git a/src/shared/components/Settings/Tools/styles.scss b/src/shared/components/Settings/Tools/styles.scss
index 55dc0280eb..eae5efbfe1 100644
--- a/src/shared/components/Settings/Tools/styles.scss
+++ b/src/shared/components/Settings/Tools/styles.scss
@@ -5,18 +5,18 @@
   flex-direction: row;
   box-shadow: 0 2px 9px 0 rgba(38, 38, 40, 0.06);
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 0;
   }
 
   .mobile-view {
     display: none;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       display: none;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
       width: 100%;
     }
@@ -28,13 +28,13 @@
     padding: 30px;
     border-bottom-left-radius: 6px;
 
-    @include md-to-lg {
+    @include from-sm-to-lg {
       width: 90px;
       padding-right: 30px;
       margin-right: 0;
     }
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -43,7 +43,7 @@
     flex: 1;
     padding: 30px 80px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 00489b76b7..188dd980b5 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -8,6 +8,18 @@ $checkbox-size: $base-unit * 4;
 $checkbox-bg-empty: $tc-gray-neutral-light;
 $checkbox-bg-selected: $tc-dark-blue;
 
+@mixin upto-sm {
+  @media (max-width: #{$screen-sm - 1px}) {
+    @content;
+  }
+}
+
+@mixin from-sm-to-lg {
+  @media (min-width: #{$screen-sm}) and (max-width: #{$screen-md}) {
+    @content;
+  }
+}
+
 @mixin md-to-lg {
   @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) {
     @content;