[REF] *: BS4, adapt media queries

media queries that target a specific screen size handled by bootstrap
have now a more convenient way to be defined:

```
@​media (min-width: $screen-sm-min) { ... }
->
@​include media-breakpoint-up(sm) { ... }
```

```
@​media (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-down(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-only(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
->
@​include media-breakpoint-between(sm, md) { ... }
```

Also, bootstrap has changed the values for its default screen sizes:

------------------
     | BS3 | BS4 |
------------------
0    | XS  | XS  | -> Portrait Mobile
576  | /   | SM  | -> Landscape Mobile
768  | SM  | MD  | -> Portrait Tablet
992  | MD  | LG  | -> Landscape Tablet / Small Desktop
1200 | LG  | XL  | -> Desktop
------------------

While it is possible to configure BS variables to behave as BS3, we took
the decision to keep the BS4 variables untouched. BS4 system seems
indeed better and having the purest bootstrap possible is better for
Odoo to be used as a framework.

45 files changed, 136 insertions, 126 deletions

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;
                 }
             }