diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss
index 64a61c4e13c..e80febc05bb 100644
--- a/addons/account/static/src/scss/account_reconciliation.scss
+++ b/addons/account/static/src/scss/account_reconciliation.scss
@@ -33,9 +33,9 @@
             width: 100%;
         }
     }
-    
+
     h1, .progress {
-        @media screen and (min-width: $screen-xs) {
+        @media screen and (min-width: 480px) { // FIXME 
             width: 48%;
         }
     }
diff --git a/addons/base_import/static/src/scss/base_import.scss b/addons/base_import/static/src/scss/base_import.scss
index 1ba7b05043f..6213a70477b 100644
--- a/addons/base_import/static/src/scss/base_import.scss
+++ b/addons/base_import/static/src/scss/base_import.scss
@@ -6,7 +6,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         position: static;
     }
 
diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss
index bfa67a298d7..79b4c3771d6 100644
--- a/addons/hr_attendance/static/src/scss/hr_attendance.scss
+++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss
@@ -28,7 +28,7 @@
     font: normal 1.2em $font-family-monospace;
     color: white;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         @include o-position-absolute(20px, 20px);
         width: auto;
         padding: 3px 10px 3px 10px;
@@ -44,7 +44,7 @@
     align-items: center;
     @include o-position-absolute(0, 0, 0, 0);
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         justify-content: center;
     }
 }
@@ -55,13 +55,13 @@
     position: relative;
     background-color: fade-out(white, 0.1);
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         overflow: hidden;
         padding: 0 2em 2em;
         flex: 1 0 auto;
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         padding: 2em 4em;
         width: auto;
         max-width: 550px;
@@ -72,11 +72,11 @@
     }
 
     .o_hr_attendance_kiosk_welcome_row {
-        @media (min-width: $screen-sm-min){
+        @include media-breakpoint-up(md) {
             display: flex;
             align-items: center;
         }
-        @media (max-width: $screen-sm-max){
+        @include media-breakpoint-down(md) {
             > div {
                 margin-bottom: 20px;
             }
@@ -138,12 +138,12 @@
             @include square(50px);
         }
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             margin: 1em -2em 0;
             background: transparent;
         }
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(md) {
             margin: 0;
             height: 90px;
             border-radius: .2em .2em 0 0;
diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
index 15dcf3aa8aa..a13c05a2246 100644
--- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -1,5 +1,5 @@
 // MOBILE LAYOUT CUSTOMIZATIONS
-@media screen and (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     #o_employee_right {
         .o_org_chart_title {
             font-size: 20px;
@@ -10,7 +10,7 @@
 }
 
 // SMALL DESKTOP LAYOUT
-@media screen and (min-width: $screen-sm-min) {
+@include media-breakpoint-up(md) {
     #o_employee_container {
         display: flex;
         width: 100%;
@@ -31,14 +31,14 @@
 }
 
 // MEDIUM DESKTOP LAYOUT
-@media screen and (min-width: $screen-md-min){
+@include media-breakpoint-up(lg) {
     #o_employee_right {
         flex: 0 1 33%;
     }
 }
 
 // LARGE DESKTOP LAYOUT
-@media screen and (min-width: $screen-lg-min){
+@include media-breakpoint-up(xl) {
     #o_employee_right {
         flex: 0 1 30%;
     }
diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss
index a05d6c24fda..21fc4ebd7ad 100644
--- a/addons/mail/static/src/scss/abstract_thread_window.scss
+++ b/addons/mail/static/src/scss/abstract_thread_window.scss
@@ -14,7 +14,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
     z-index: $o-mail-thread-window-zindex;
     box-shadow: -5px -5px 10px rgba(black, 0.18);
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         width: 100%;
         height: 100%!important;
         box-shadow: none;
@@ -37,7 +37,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
         background-color: $o-brand-primary;
         padding: 8px;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             height: $o-mail-chat-header-height;
             padding-top: 12px;
             border-radius: 0px;
@@ -101,7 +101,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
     cursor: pointer;
     box-shadow: none;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         display: none;
     }
 
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index f12d0cbf528..367365bf6bb 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -67,7 +67,7 @@
         .o_composer_button_full_composer {
             @include o-position-absolute(auto, 0);
         }
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             .o_composer_button_send {
                 color: $o-brand-optional;
             }
@@ -220,7 +220,7 @@
             .o_chatter_composer_tools {
                 flex: 0 0 auto;
             }
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 .o_composer_button_send {
                     display: inline-block;
                 }
@@ -264,10 +264,10 @@ $o-mail-attachment-margin: 5px;
     width: 100%;
     padding: $o-mail-attachment-margin;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         width: 50%;
     }
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up(lg) {
         width: 25%;
     }
 
@@ -358,13 +358,13 @@ $o-mail-attachment-margin: 5px;
     > .o_attachment {
         width: 50%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(md) {
             width: percentage(1/3);
         }
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up(lg) {
             width: percentage(1/4);
         }
-        @media (min-width: $screen-lg-min) {
+        @include media-breakpoint-up(xl) {
             width: percentage(1/6);
         }
 
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 8096138ef5f..1df07e40121 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -43,7 +43,7 @@
         overflow: auto;
         padding: $o-horizontal-padding 0;
 
-        @media (min-width: $screen-lg-min) {
+        @include media-breakpoint-up(xl) {
             width: $o-mail-chat-sidebar-width + 50px;
         }
 
@@ -116,11 +116,11 @@
         height: 100%;
         margin-left: $o-mail-chat-sidebar-width;
         position: relative;
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(md) {
             overflow: auto;
         }
 
-        @media (min-width: $screen-lg-min) {
+        @include media-breakpoint-up(xl) {
             margin-left: $o-mail-chat-sidebar-width + 50px;
         }
 
@@ -260,7 +260,7 @@
 // ------------------------------------------------------------------
 // Mobile
 // ------------------------------------------------------------------
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_mail_discuss {
         display: flex;
         flex-flow: column nowrap;
@@ -398,7 +398,7 @@
     }
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
 
     .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
         border: none;
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index 573f13e35b2..ae7b7ae3405 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -1,6 +1,6 @@
 .o_followers {
     float: right;
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         display: none !important; // Hide the followers in mobile
     }
 
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index dfad781ab42..4d774b2824a 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -65,7 +65,7 @@
             min-height: 50px;
             overflow-y: auto;
 
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(md) {
                 .o_mail_preview {
                     min-height: 50px;
                     padding: 5px;
@@ -105,7 +105,7 @@
 
 // Mobile rules
 // Goal: mock the design of Discuss in mobile
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_mail_systray_item {
         .o_notification_counter {
             top: 10%;
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 1bcc80daa6b..14ff5c09bba 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -6,7 +6,7 @@
     .o_thread_date_separator {
         margin-top: 15px;
         margin-bottom: 30px;
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             margin-top: 0px;
             margin-bottom: 15px;
         }
@@ -54,7 +54,7 @@
             text-align: center;
             font-size: smaller;
 
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-top: 4px;
                 font-size: x-small;
             }
diff --git a/addons/mail/static/src/scss/thread_window.scss b/addons/mail/static/src/scss/thread_window.scss
index 572ff0c8ff3..60afdbb3ac7 100644
--- a/addons/mail/static/src/scss/thread_window.scss
+++ b/addons/mail/static/src/scss/thread_window.scss
@@ -33,7 +33,7 @@
                     padding: 10px;
                     font-size: 13px;
                 }
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     width: 70%;
                     > textarea {
                         padding: 15px 10px;
@@ -44,7 +44,7 @@
                 @include o-position-absolute($right: 0px, $top: 0px);
                 button {
                     padding: 10px;
-                    @media (max-width: $screen-xs-max) {
+                    @include media-breakpoint-down(sm) {
                         padding: 13px;
                     }
                     &.btn-icon {
diff --git a/addons/portal/static/src/scss/bootstrap.extend.scss b/addons/portal/static/src/scss/bootstrap.extend.scss
index 55bbb15410d..44e5f075ef7 100644
--- a/addons/portal/static/src/scss/bootstrap.extend.scss
+++ b/addons/portal/static/src/scss/bootstrap.extend.scss
@@ -11,7 +11,7 @@
     text-align: justify;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
         text-align: inherit;
     }
@@ -28,7 +28,7 @@
         text-align: justify;
     }
 }
-@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+@include media-breakpoint-only(md) {
     .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
         text-align: inherit;
     }
@@ -45,7 +45,7 @@
         text-align: justify;
     }
 }
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+@include media-breakpoint-only(lg) {
     .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
         text-align: inherit;
     }
@@ -62,7 +62,7 @@
         text-align: justify;
     }
 }
-@media (min-width: $screen-lg-min) {
+@include media-breakpoint-up(xl) {
     .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
         text-align: inherit;
     }
@@ -78,4 +78,4 @@
     .text-justify-lg {
         text-align: justify;
     }
-}
\ No newline at end of file
+}
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index fe55fe345f1..6e8ca8dd7a9 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -40,7 +40,7 @@ header {
         &.divider {
             @include o-w-fill-navbar;
             border-right: 1px solid $navbar-default-link-disabled-color;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 display: none;
             }
         }
@@ -50,7 +50,7 @@ header {
         }
     }
     .nav.navbar-nav.pull-right {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             float: none!important;
         }
     }
@@ -283,7 +283,7 @@ img.o_we_custom_image {
         .navbar-brand {
             margin: 0;
 
-            @media (min-width: $grid-float-breakpoint) {
+            @include media-breakpoint-up(md) {
                 padding: $navbar-padding-vertical $navbar-padding-horizontal 0 0;
             }
         }
@@ -320,7 +320,7 @@ img.o_we_custom_image {
                 }
             }
 
-            @media (max-width: $grid-float-breakpoint) {
+            @include media-breakpoint-down(sm) {
                 .navbar-collapse {
                     z-index: 0;
                     box-shadow: inset 0 0 0 1px $btn-default-border;
@@ -335,7 +335,7 @@ img.o_we_custom_image {
                 }
             }
 
-            @media (min-width: $grid-float-breakpoint) {
+            @include media-breakpoint-up(md) {
                 > .container-fluid {
                     padding: 0;
 
diff --git a/addons/stock/static/src/scss/stock_traceability_report.scss b/addons/stock/static/src/scss/stock_traceability_report.scss
index 7480521026f..831f3f28170 100644
--- a/addons/stock/static/src/scss/stock_traceability_report.scss
+++ b/addons/stock/static/src/scss/stock_traceability_report.scss
@@ -20,7 +20,7 @@
     }
 }
 .o_stock_reports_page {
-    @media (max-width: $screen-md-min) {
+    @include media-breakpoint-down(md) {
         overflow-x:scroll;
     }
     background-color: $o-view-background-color;
diff --git a/addons/theme_default/static/src/scss/option_layout_boxed.scss b/addons/theme_default/static/src/scss/option_layout_boxed.scss
index f6a428752bd..eda53e8a6c0 100644
--- a/addons/theme_default/static/src/scss/option_layout_boxed.scss
+++ b/addons/theme_default/static/src/scss/option_layout_boxed.scss
@@ -1,5 +1,5 @@
 #wrapwrap {
-    @media (min-width: $screen-sm-min){
+    @include media-breakpoint-up(md) {
         width: 85%;
         margin: 0 auto;
     }
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 2ebad35337a..011b0617efa 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -2,7 +2,7 @@
 @mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
     padding: $padding-base $o-horizontal-padding;
 
-    @media (min-width: $screen-lg-min) {
+    @include media-breakpoint-up(xl) {
         padding-left: $o-horizontal-padding*2;;
     }
 }
@@ -18,7 +18,7 @@
 .o_base_settings {
     height: 100%;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         flex-flow: column nowrap;
     }
 
@@ -31,7 +31,7 @@
 
             .title, .o_setting_search {
                 flex: 1 0 auto;
-                width: $screen-xs-min*0.5;
+                width: map-get($o-extra-grid-breakpoints, vsm) / 2;
             }
 
             .o_setting_search {
@@ -75,7 +75,7 @@
 
         overflow: auto;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             flex-flow: column nowrap;
         }
 
@@ -87,7 +87,7 @@
             overflow: auto;
             padding-top: $o-horizontal-padding*0.5;
 
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 flex: 0 0 $o-base-settings-mobile-tabs-height;
                 display: inline-flex;
                 position: relative;
@@ -119,7 +119,7 @@
                 }
 
                 // Mobile Tabs
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     display: block;
                     @include o-position-absolute($left:100%);
                     @include size(auto, $o-base-settings-mobile-tabs-height);
@@ -190,7 +190,7 @@
                 }
 
                 .o_settings_container {
-                    max-width: $screen-md-min; // Provide a maximum container size to ensure readability
+                    max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
                     @include o-base-settings-horizontal-padding(0);
                 }
             }
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 345009ac3e9..54a8eb4ef76 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -93,7 +93,7 @@
 
         > .o_cp_switch_buttons > .btn:first-child {
             margin-left: $o-horizontal-padding;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-left: $o-horizontal-padding - 6;
             }
         }
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 7db8b2fcb3c..9a60d78d9d3 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -66,7 +66,7 @@
             @extend %dropdown-li-a-padding;
             color: $o-main-text-color;
 
-            @media (max-width: $screen-sm-max) {
+            @include media-breakpoint-down(md) {
                 color: white;
                 text-decoration: underline;
             }
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 52417cfad9f..080bf33760f 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -253,7 +253,7 @@
     }
     // Radio buttons
     &.o_field_radio {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             display: inline-block;
         }
         .o_radio_input {
@@ -365,7 +365,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: $screen-xs-min) {
+        @include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 02079d09178..0f38d7f7305 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -16,7 +16,7 @@
     }
     .oe_inline {
         width: auto!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             &.o_inner_group {
                 width: 1px!important;
             }
@@ -31,7 +31,7 @@
         float: right!important;
     }
 
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
                 display: flex;
@@ -103,7 +103,7 @@
             max-width: $container-sm - (2 * $o-horizontal-padding);
         }
 
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             .o_row {
                 > .o_field_widget, > div {
                     flex: 1 1 auto;
@@ -425,7 +425,7 @@
     // Text field with oe_inline class
     .o_field_text.oe_inline {
         width: 100%!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             width: 45%!important;
         }
     }
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index 9a1bbd2b98c..0bf1a5cdc52 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -10,7 +10,7 @@
         justify-content: space-between;
         padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             margin-bottom: 10px;
         }
 
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 1a610cd72c2..b377a93a0eb 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -5,7 +5,7 @@
     align-content: stretch;
     overflow-x: visible;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         padding: 0px!important;
         overflow-x: auto;
     }
@@ -15,7 +15,7 @@
         border: 1px solid $gray-lighter-dark;
         background-color: white;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
         }
         &:focus, &:focus-within {
@@ -142,7 +142,7 @@
         .o_dropdown_kanban {
             @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
             visibility: hidden;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 visibility: visible;
             }
 
@@ -207,7 +207,7 @@
 
             > button, > a {
                 @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     right: $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -258,7 +258,7 @@
 
             + div {
                 padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -484,7 +484,7 @@
             width: $o-kanban-default-record-width;
             margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
 
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin: 0 0 -1px 0;
                 flex: 1 0 100%;
             }
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index c73c47e14db..cf54d545a5a 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,4 +1,4 @@
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
         position: relative;
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index 5881a54a7a8..5dc3c1eb7d0 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -31,7 +31,7 @@
     }
 
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         .modal-dialog {
             height: 100%;
             padding: 30px 0;
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index c2ba099cf95..9a3f3d9a718 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -38,7 +38,7 @@
         font-weight: 500;
         line-height: $o-navbar-height;
 
-        @media (max-width: $screen-sm-max) {
+        @include media-breakpoint-down(md) {
             float: none;
             margin: 0;
             border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
@@ -151,7 +151,7 @@
         }
     }
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(md) {
         transition: height 200ms linear 0s;
 
         position: relative;
@@ -211,7 +211,7 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(md) {
     body.o_mobile_menu_opened {
         overflow: hidden;
         height: 100%;
@@ -224,7 +224,7 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(md) {
      .o_switch_company_menu > .dropdown-menu {
          padding-top: 0px;
          li.bg-info {
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index b394aeafe26..c8fd2f05338 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -36,8 +36,21 @@ $o-tooltip-text-color: #777777;
 $o-tooltip-title-text-color: #4c4c4c;
 
 // Layout
-$screen-xs-min: 475px;
-$screen-xl-min: 1534px;
+//
+// Extension of BS4. This is not redefining the BS4 variable directly as we only
+// need the extra ones for media queries (not creating new breakpoint classes).
+// Note: default BS4 values are hardcoded here while it should be possible to
+// merge with the default BS variable (but we would have to take care of
+// ordering & cie).
+$o-extra-grid-breakpoints: (
+    xs: 0,
+    vsm: 475px,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1534px,
+);
 
 $o-form-group-cols: 12;
 $o-form-spacing-unit: 5px;
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index 9e654c71bcc..fa666fca246 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -10,7 +10,7 @@
     z-index: $zindex-modal;
     padding: 50px;
     margin: -5% auto 0 (-$reward-size / 2);
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         margin: -5% auto 0 (-$reward-size-mobile / 2);
     }
     background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
@@ -20,7 +20,7 @@
     animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
     @include o-position-absolute(20%, auto, auto, 50%);
     @include size($reward-size, $reward-size);
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         @include size($reward-size-mobile, $reward-size-mobile);
     }
 
@@ -75,7 +75,7 @@
     .o_reward_stars {
         display: block;
         @include size($reward-size * 0.75, $reward-size / 2);
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
         }
         @include o-position-absolute(18%, 7%);
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index 8ab2d5bc322..72417929152 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -15,9 +15,6 @@ $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%);
 $o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
               #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
 
-$screen-xxs-max: ($screen-xs-min - 1);
-$screen-lg-max: ($screen-xl-min - 1);
-
 $o-sheet-cancel-hpadding: $o-horizontal-padding;
 $o-sheet-cancel-bpadding: $o-horizontal-padding;
 
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index e38a25b5e58..f659ee7c466 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -199,12 +199,12 @@
 }
 
 // Mobile rules
-@media only screen and (max-width: 768px) {
+@include media-breakpoint-down(sm) {
     .o_calendar_container {
         padding: 0;
     }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 67301b3a35f..eab28912885 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -32,7 +32,7 @@ html, body {
             min-width: 20px;
         }
     }
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         .table-responsive > table.table {
             table-layout: auto;
         }
@@ -121,7 +121,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
     margin-left: 0;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
         transform: none !important;
     }
diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss
index 4e9ee93a476..851f8f1f57d 100644
--- a/addons/web_settings_dashboard/static/src/scss/dashboard.scss
+++ b/addons/web_settings_dashboard/static/src/scss/dashboard.scss
@@ -18,7 +18,7 @@
     .o_web_settings_dashboard_col {
         padding: 10px 8px;
 
-        @media (max-width: $screen-sm-max) {
+        @include media-breakpoint-down(md) {
             padding: 5px 8px;
         }
 
@@ -46,7 +46,7 @@
                     font-size: 1.5em;
                 }
             }
-            @media (max-width: 1200px) {
+            @include media-breakpoint-down(lg) {
                 > li {
                     width: 100%;
                     margin-bottom: 5px;
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 04ea2a8529d..d719872c94e 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -129,11 +129,11 @@
                 flex-flow: row wrap;
                 justify-content: flex-start;
                 > .o_inner_box {
-                    @media (max-width: $screen-sm-min) {
+                    @include media-breakpoint-down(sm) {
                         flex: 1 1 200px;
                         display: block !important;
                     }
-                    @media (min-width: $screen-sm-min) {
+                    @include media-breakpoint-up(md) {
                         flex: 0 0 16.6%;
                     }
                 }
@@ -209,7 +209,7 @@
 
             .o_properties_selection {
 
-                @media (min-width: $screen-md-min) {
+                @include media-breakpoint-up(lg) {
                     display: flex;
                 }
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index a05e9b32067..ecc9babb274 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -493,7 +493,7 @@ div.carousel {
 
 // Company Team
 .s_company_team {
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(md) {
         img {
             max-width: 50%;
         }
@@ -547,7 +547,7 @@ div.carousel {
     .js_language_selector {
         display: inline-block;
     }
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         .row {
             display: flex;
             > div {
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 71afd29fc99..605b70a8205 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -58,7 +58,7 @@ body.o_connected_user {
             font-size: 20px;
         }
     }
-    @media only screen and (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         #oe_applications {
             position: inherit;
             z-index: 1002;
@@ -233,7 +233,7 @@ body .modal {
                         text-align: right;
                         background-color: $o-we-color-paper;
 
-                        @media screen and (min-width: $screen-md-min) {
+                        @include media-breakpoint-up(lg) {
                             width: 38%;
                         }
                     }
@@ -243,7 +243,7 @@ body .modal {
                         visibility: visible;
                         padding-left: 15px;
 
-                        @media screen and (min-width: $screen-md-min) {
+                        @include media-breakpoint-up(lg) {
                             padding-left: 50px;
                         }
                     }
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index 1a06b1d584e..8c1a4f15b6f 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -92,7 +92,7 @@
     }
 
     /* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         .o_blog_cover_container {
             > .blog_title {
                 > h1 {
diff --git a/addons/website_form/static/src/scss/website_form.scss b/addons/website_form/static/src/scss/website_form.scss
index b1e9f55e74d..add4e0e6abf 100644
--- a/addons/website_form/static/src/scss/website_form.scss
+++ b/addons/website_form/static/src/scss/website_form.scss
@@ -9,12 +9,12 @@
     flex-basis: 33%;
 
     // col-sm-6
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(md) {
         flex-basis: 50%;
     }
 
     // col-xs-12
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         flex-basis: 100%;
     }
 }
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index fbe8bf392da..4230c2fca87 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -87,7 +87,7 @@
         width: 100px;
     }
 
-    @media (max-width: 767px) {
+    @include media-breakpoint-down(sm) {
         .td-img,
         .td-price-total {
             display: none;
@@ -302,7 +302,7 @@
         max-height: 40px;
     }
 }
-@media (min-width: 992px) {
+@include media-breakpoint-up(lg) {
     #products_grid {
         &.col-md-12 {
             .oe-height-1 {
@@ -353,7 +353,7 @@
         }
     }
 }
-@media (min-width: 1200px) {
+@include media-breakpoint-up(xl) {
     #products_grid {
         &.col-md-12 {
             .oe-height-1 {
@@ -404,7 +404,7 @@
         }
     }
 }
-@media (max-width: 768px) {
+@include media-breakpoint-down(sm) {
     #products_grid {
         table,
         tbody,
diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss
index fbdd8fdbdef..0da082e7477 100644
--- a/addons/website_sale/static/src/scss/website_sale_backend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_backend.scss
@@ -8,22 +8,22 @@
         padding: $o-mail-attachment-margin;
         flex: 0 1 50%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(md) {
             flex: 0 0 percentage(1/3);
         }
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up(lg) {
             flex: 0 0 percentage(1/5);
         }
 
-        @media (min-width: $screen-lg-min){
+        @include media-breakpoint-up(xl) {
             flex: 0 0 percentage(1/6);
         }
 
         .o_image_box {
             padding-top: 50%;
 
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(md) {
                 padding-top: 75%;
             }
         }
diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
index 687ba5741f2..2d3313a51c6 100644
--- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss
+++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss
@@ -20,7 +20,7 @@
         justify-content: center;
     }
     .o_link_enable {
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up(lg) {
             border-right: 1px solid #ccc;
         }
         height: initial;
@@ -41,7 +41,7 @@
         }
     }
     .o_link_disable {
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up(lg) {
             border-right: 1px solid #ccc;
         }
         height: initial;
diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss
index 82531821263..6363757d8b9 100644
--- a/addons/website_sale/static/src/scss/website_sale_frontend.scss
+++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss
@@ -25,14 +25,14 @@ $o-wsale-wizard-label-completed: $state-success-text;
     margin-top: $grid-gutter-width*0.5;
     padding: 0 $grid-gutter-width*0.5;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         padding: 0;
     }
 
     .progress-wizard-step {
         position: relative;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up(md) {
             margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5;
             float: left;
             width: percentage(1/3);
@@ -41,7 +41,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
                 width: percentage(1/4);
             }
         }
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             &.disabled, &.complete {
                 display:none;
             }
@@ -55,7 +55,7 @@ $o-wsale-wizard-label-completed: $state-success-text;
             border-radius: 50%;
             box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default;
 
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(md) {
                 @include o-position-absolute($left: 50%);
                 margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5);
             }
@@ -67,11 +67,11 @@ $o-wsale-wizard-label-completed: $state-success-text;
             font-size: $font-size-base;
             display: inline-block;
 
-            @media (min-width: $screen-sm-min) {
+            @include media-breakpoint-up(md) {
                 display: block;
                 margin: (10px + $tmp-dot-radius) 0 20px 0;
             }
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-left: -15px;
                 font-size:24px;
             }
diff --git a/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss b/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
index 4397f529cce..b8307e83880 100644
--- a/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
+++ b/addons/website_sale_delivery/static/src/scss/website_sale_delivery.scss
@@ -1,7 +1,7 @@
-@media(max-width:767px){
+@include media-breakpoint-down(sm) {
     .o_delivery_compute {
         max-width: 130px;
         text-overflow: ellipsis;
         overflow: hidden;
     }
-}
\ No newline at end of file
+}
diff --git a/addons/website_sale_options/static/src/scss/website_sale.scss b/addons/website_sale_options/static/src/scss/website_sale.scss
index 805ccc4e404..7c129d35b4f 100644
--- a/addons/website_sale_options/static/src/scss/website_sale.scss
+++ b/addons/website_sale_options/static/src/scss/website_sale.scss
@@ -12,7 +12,7 @@ div#modal_optional_products table tr td {
     border: 0;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     div#modal_optional_products .td-qty {
         display: none;
     }
diff --git a/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss b/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss
index f0d7c40b80d..e43943a8aa5 100644
--- a/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss
+++ b/addons/website_sale_wishlist/static/src/scss/website_sale_wishlist.scss
@@ -9,7 +9,7 @@
 }
 
 // XS size
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .oe_website_sale {
         .td-wish-btn {
             width: 100px;
diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss
index f8cfc0c250a..365592fdcf3 100644
--- a/addons/website_theme_install/static/src/scss/website_theme_install.scss
+++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss
@@ -8,7 +8,7 @@
         justify-content: space-between;
         margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width);
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             padding-left: $o-horizontal-padding - $o-kanban-record-margin;
             padding-right: $o-horizontal-padding;
         }
diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index c152e86b31d..5665b518ed4 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -54,7 +54,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         flex-flow: row nowrap;
         justify-content: initial;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
            flex-flow: column nowrap;
 
             .o_onboarding_folded_title {
@@ -71,7 +71,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         position: relative;
         opacity: 0.6;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             text-align: left;
             margin-bottom: 16px;
             align-items: baseline;
@@ -229,7 +229,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
             .o_onboarding_folded_title {
                 padding: 6px 10px 6px 0;
 
-                @media (min-width: $screen-sm-min) {
+                @include media-breakpoint-up(md) {
                     border-right: 1px solid $gray-lighter-dark;
                 }
             }