diff --git a/Build/Sources/Sass/_legacy.scss b/Build/Sources/Sass/_legacy.scss
index 445d2be04fd9..9f9ca32d7760 100644
--- a/Build/Sources/Sass/_legacy.scss
+++ b/Build/Sources/Sass/_legacy.scss
@@ -75,7 +75,6 @@
 
 //// Variables
 $line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
-$grid-float-breakpoint: $screen-sm-min !default;
 $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
 
 .hidden,
diff --git a/Build/Sources/Sass/adminpanel.scss b/Build/Sources/Sass/adminpanel.scss
index b136299e84e1..04bbe5ae282a 100644
--- a/Build/Sources/Sass/adminpanel.scss
+++ b/Build/Sources/Sass/adminpanel.scss
@@ -7,8 +7,9 @@
 // Load Variables
 //
 @import "../../node_modules/bootstrap/scss/functions";
-@import "../../node_modules/bootstrap/scss/variables";
 @import "variables/main";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
 
 //
 // Variables
@@ -215,7 +216,7 @@ body.typo3-adminPanel-noscroll {
         .typo3-adminPanel-module-trigger-label {
             display: none;
 
-            @media (min-width: $screen-sm) {
+            @include media-breakpoint-up('md') {
                 display: block;
             }
         }
@@ -305,7 +306,7 @@ body.typo3-adminPanel-noscroll {
         display: none;
         opacity: .5;
 
-        @media (min-width: $screen-sm) {
+        @include media-breakpoint-up('md') {
             display: block;
         }
     }
diff --git a/Build/Sources/Sass/component/_card.scss b/Build/Sources/Sass/component/_card.scss
index 67d4e16e475b..714204727104 100644
--- a/Build/Sources/Sass/component/_card.scss
+++ b/Build/Sources/Sass/component/_card.scss
@@ -255,17 +255,17 @@ a.card:hover {
 }
 
 .card-size-small {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: calc(50% - #{$card-spacing*2});
     }
 
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: calc(25% - #{$card-spacing*2});
     }
 }
 
 .card-size-medium {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: calc(50% - #{$card-spacing*2});
     }
 }
@@ -276,11 +276,11 @@ a.card:hover {
 .card-size-fixed-small {
     width: calc(100% - #{$card-spacing*2});
 
-    @media (min-width: $screen-ms-min) {
+    @include media-breakpoint-up('sm') {
         width: calc(50% - #{$card-spacing*2});
     }
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         width: 300px;
     }
 }
diff --git a/Build/Sources/Sass/component/_modal.scss b/Build/Sources/Sass/component/_modal.scss
index b560af4c2fce..89883e4c2c66 100644
--- a/Build/Sources/Sass/component/_modal.scss
+++ b/Build/Sources/Sass/component/_modal.scss
@@ -115,7 +115,7 @@ $modal-sidebar-button-space: $padding-small-vertical;
     .modal-body {
         padding: 0;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             display: flex;
             flex-direction: row;
         }
@@ -134,11 +134,11 @@ $modal-sidebar-button-space: $padding-small-vertical;
         // event to adjust the image width to the current view port
         width: 100%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: calc(100% - #{$modal-sidebar-sm});
         }
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             width: calc(100% - #{$modal-sidebar-md});
         }
 
@@ -158,11 +158,11 @@ $modal-sidebar-button-space: $padding-small-vertical;
         -webkit-overflow-scrolling: touch;
         width: 100%;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: $modal-sidebar-sm;
         }
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             width: $modal-sidebar-md;
         }
     }
diff --git a/Build/Sources/Sass/component/_table.scss b/Build/Sources/Sass/component/_table.scss
index 138fae2ebc4d..52775a95e2ca 100644
--- a/Build/Sources/Sass/component/_table.scss
+++ b/Build/Sources/Sass/component/_table.scss
@@ -133,7 +133,7 @@
     }
 
     .col-word-break {
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             word-wrap: break-word;
             word-break: break-all;
         }
diff --git a/Build/Sources/Sass/cropper/_main.scss b/Build/Sources/Sass/cropper/_main.scss
index 60050128bfbb..afdec3d554e4 100644
--- a/Build/Sources/Sass/cropper/_main.scss
+++ b/Build/Sources/Sass/cropper/_main.scss
@@ -196,21 +196,21 @@
         opacity: 0;
     }
 
-    @media (min-width: $screen-sm) {
+    @include media-breakpoint-up('md') {
         &.point-se {
             height: 15px;
             width: 15px;
         }
     }
 
-    @media (min-width: $screen-md) {
+    @include media-breakpoint-up('lg') {
         &.point-se {
             height: 10px;
             width: 10px;
         }
     }
 
-    @media (min-width: $screen-lg) {
+    @include media-breakpoint-up('xl') {
         &.point-se {
             height: 5px;
             width: 5px;
diff --git a/Build/Sources/Sass/cropper/_variables.scss b/Build/Sources/Sass/cropper/_variables.scss
index d26fce9ccaca..fd350ac35460 100644
--- a/Build/Sources/Sass/cropper/_variables.scss
+++ b/Build/Sources/Sass/cropper/_variables.scss
@@ -7,10 +7,3 @@ $color-brand: #69f;
 $color-black: #000;
 $color-white: #fff;
 $color-orange: #ff8700;
-
-// Media queries breakpoints
-// -----------------------------------------------------------------------------
-$screen-xs: 480px; // Extra small screen / phone
-$screen-sm: 768px; // Small screen / tablet
-$screen-md: 992px; // Medium screen / desktop
-$screen-lg: 1200px; // Large screen / wide desktop
diff --git a/Build/Sources/Sass/form.scss b/Build/Sources/Sass/form.scss
index 639925ea0580..c50634808866 100644
--- a/Build/Sources/Sass/form.scss
+++ b/Build/Sources/Sass/form.scss
@@ -11,6 +11,7 @@
 @import "../../node_modules/bootstrap/scss/functions";
 @import "variables/main";
 @import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
 
 //
 // Variables
@@ -20,7 +21,6 @@ $stage-abstract-element-height: 62px;
 $stage-abstract-element-toolbar-height: 35px;
 $stage-icon-container-width: 40px;
 $stage-validation-list-width: 100px;
-$stage-breakpoint-max: $screen-lg - 1;
 $stage-validation-transition-time-in: .2s;
 $stage-validation-transition-time-out: .3s;
 $navigation-bg: $gray-100;
@@ -901,7 +901,7 @@ $tree-line-height: 20px;
     // Preview
     &.t3-form-stage-viewmode-preview {
         #t3-form-stage-inner-container {
-            @media (max-width: $stage-breakpoint-max) {
+            @include media-breakpoint-down('xl') {
                 width: 600px;
             }
         }
diff --git a/Build/Sources/Sass/module/_extensionmanager.scss b/Build/Sources/Sass/module/_extensionmanager.scss
index 8a781910cc1c..42e311ef0360 100644
--- a/Build/Sources/Sass/module/_extensionmanager.scss
+++ b/Build/Sources/Sass/module/_extensionmanager.scss
@@ -105,7 +105,7 @@
         width: 50px;
         display: block;
 
-        @media (min-width: $screen-sm-min) {
+        @include media-breakpoint-up('md') {
             width: 64px;
         }
     }
@@ -122,7 +122,7 @@
     margin-bottom: 2em;
     max-width: 100%;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         float: left;
         margin-right: 3em;
     }
diff --git a/Build/Sources/Sass/module/_scheduler.scss b/Build/Sources/Sass/module/_scheduler.scss
index 298ea47555db..fe136e96deb2 100644
--- a/Build/Sources/Sass/module/_scheduler.scss
+++ b/Build/Sources/Sass/module/_scheduler.scss
@@ -24,14 +24,14 @@
 }
 
 .task-form .form-group {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: 50%;
     }
 }
 
 #task_start_col,
 #task_end_col {
-    @media (min-width: $screen-md-min) {
+    @include media-breakpoint-up('lg') {
         width: 25%;
     }
 }
diff --git a/Build/Sources/Sass/scaffold/_scaffold.scss b/Build/Sources/Sass/scaffold/_scaffold.scss
index f8a7b201f355..e28ccc7bd274 100644
--- a/Build/Sources/Sass/scaffold/_scaffold.scss
+++ b/Build/Sources/Sass/scaffold/_scaffold.scss
@@ -6,8 +6,6 @@
 //
 // Variables
 //
-$scaffold-breakpoint-max: ($screen-md - 1);
-$scaffold-breakpoint: $screen-md;
 $scaffold-overlay-bg: rgba(0, 0, 0, .65);
 $scaffold-overlay-zindex: $zindex-modal-backdrop;
 $scaffold-bg: #f5f5f5;
@@ -100,7 +98,7 @@ body {
     position: absolute;
     z-index: $scaffold-overlay-zindex + 1;
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         z-index: $scaffold-modulemenu-zindex;
         position: sticky;
     }
@@ -132,7 +130,7 @@ body {
     }
     display: none;
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         overflow: visible;
         background-color: transparent;
         height: $scaffold-topbar-height;
@@ -148,7 +146,7 @@ body {
             background-color: $scaffold-modulemenu-bg;
         }
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             .toolbar-item {
                 padding: 4px;
             }
@@ -223,7 +221,7 @@ body {
     .scaffold-content-overlay {
         display: block;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             display: none;
         }
     }
@@ -234,7 +232,7 @@ body {
 //
 .scaffold {
     .scaffold-modulemenu {
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             display: none;
         }
     }
@@ -244,7 +242,7 @@ body {
     .scaffold-modulemenu {
         width: $scaffold-modulemenu-expanded-width;
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             display: block;
         }
     }
diff --git a/Build/Sources/Sass/scaffold/_toolbar.scss b/Build/Sources/Sass/scaffold/_toolbar.scss
index 43fd5b4f4957..0ee309017660 100644
--- a/Build/Sources/Sass/scaffold/_toolbar.scss
+++ b/Build/Sources/Sass/scaffold/_toolbar.scss
@@ -61,7 +61,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         width: 33.33%;
     }
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         width: auto;
         margin-left: 1px;
     }
@@ -74,13 +74,13 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         max-height: calc(100vh - #{$toolbar-height} - 1rem);
         overflow-y: auto;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             border-top: 0;
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
 
-        @media (max-width: $scaffold-breakpoint-max) {
+        @include media-breakpoint-down('lg') {
             position: fixed !important;
             width: 100% !important;
             top: 50% !important;
@@ -133,7 +133,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
         background-color: #292929;
     }
 
-    @media (min-width: $scaffold-breakpoint) {
+    @include media-breakpoint-up('lg') {
         border: none;
     }
 }
@@ -144,7 +144,7 @@ $toolbar-navigation-search-focus-bg: $toolbar-dropdown-link-active-bg;
     }
 }
 
-@media (min-width: $scaffold-breakpoint) {
+@include media-breakpoint-up('lg') {
     .toolbar-item-title {
         display: none;
     }
diff --git a/Build/Sources/Sass/scaffold/_topbar.scss b/Build/Sources/Sass/scaffold/_topbar.scss
index b529b8ee03ab..a95afd57364c 100644
--- a/Build/Sources/Sass/scaffold/_topbar.scss
+++ b/Build/Sources/Sass/scaffold/_topbar.scss
@@ -65,7 +65,7 @@ $toolbar-item-padding-horizontal: 15px;
     &.topbar-button-modulemenu {
         left: 0;
 
-        @media (min-width: $scaffold-breakpoint) {
+        @include media-breakpoint-up('lg') {
             background-color: $topbar-button-active-bg;
         }
     }
@@ -96,7 +96,7 @@ $toolbar-item-padding-horizontal: 15px;
     display: inline-flex;
 }
 
-@media (min-width: $scaffold-breakpoint) {
+@include media-breakpoint-up('lg') {
     .topbar-button-toolbar,
     .topbar-button-search {
         display: none;
@@ -109,7 +109,7 @@ $toolbar-item-padding-horizontal: 15px;
 .topbar-header {
     padding-left: $topbar-button-width;
 
-    @media (max-width: $scaffold-breakpoint-max) {
+    @include media-breakpoint-down('lg') {
         padding-right: ($topbar-button-width) !important;
     }
 }
diff --git a/Build/Sources/Sass/typo3/_element_cropper.scss b/Build/Sources/Sass/typo3/_element_cropper.scss
index 7a107ae44e86..e068f150214d 100644
--- a/Build/Sources/Sass/typo3/_element_cropper.scss
+++ b/Build/Sources/Sass/typo3/_element_cropper.scss
@@ -65,7 +65,7 @@
         max-width: 1000px;
         max-height: calc(100vh - 250px);
 
-        @media (min-width: $screen-md-min) {
+        @include media-breakpoint-up('lg') {
             max-height: 100%;
         }
     }
diff --git a/Build/Sources/Sass/typo3/_login_screen.scss b/Build/Sources/Sass/typo3/_login_screen.scss
index 83ae4b2bea64..4b12837f5b53 100644
--- a/Build/Sources/Sass/typo3/_login_screen.scss
+++ b/Build/Sources/Sass/typo3/_login_screen.scss
@@ -67,7 +67,7 @@ $login-container-padding-horizontal: 2.5em;
     display: block;
     color: #666;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up('md') {
         flex: none;
         position: absolute;
         bottom: 1.5em;
@@ -167,7 +167,7 @@ $login-container-padding-horizontal: 2.5em;
         font-weight: bold;
     }
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down('md') {
         margin-bottom: 0;
     }
 
diff --git a/Build/Sources/Sass/typo3/_main_type.scss b/Build/Sources/Sass/typo3/_main_type.scss
index 871c48f897ae..9a06b4cd8326 100644
--- a/Build/Sources/Sass/typo3/_main_type.scss
+++ b/Build/Sources/Sass/typo3/_main_type.scss
@@ -18,17 +18,6 @@
     overflow-wrap: break-word;
 }
 
-//
-// Horizontal description lists
-//
-.dl-horizontal {
-    @media (min-width: $grid-float-breakpoint) {
-        dt {
-            text-align: left;
-        }
-    }
-}
-
 //
 // Anchor states
 //
diff --git a/Build/Sources/Sass/variables/_main.scss b/Build/Sources/Sass/variables/_main.scss
index dfcd22c7979c..61b287357113 100644
--- a/Build/Sources/Sass/variables/_main.scss
+++ b/Build/Sources/Sass/variables/_main.scss
@@ -92,25 +92,6 @@ $line-height-base: 1.5;
 // Paragraphs
 $paragraph-margin-bottom: .5rem;
 
-// Screen Dimensions
-$screen-xs: 480px;
-$screen-xs-min: $screen-xs;
-$screen-phone: $screen-xs-min;
-$screen-ms: 624px;
-$screen-ms-min: $screen-ms;
-$screen-sm: 768px;
-$screen-sm-min: $screen-sm;
-$screen-tablet: $screen-sm-min;
-$screen-md: 992px;
-$screen-md-min: $screen-md;
-$screen-desktop: $screen-md-min;
-$screen-lg: 1200px;
-$screen-lg-min: $screen-lg;
-$screen-lg-desktop: $screen-lg-min;
-$screen-xs-max: ($screen-sm-min - 1);
-$screen-sm-max: ($screen-md-min - 1);
-$screen-md-max: ($screen-lg-min - 1);
-
 // Components
 $padding-base-vertical: 6px;
 $padding-base-horizontal: 6px;
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index a671cc66a2f7..870a9561beb8 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2453,7 +2453,7 @@ body.with-overflow{overflow:auto}
 .scaffold-toolbar{overflow:visible;background-color:transparent;height:45px;left:auto;bottom:auto;display:block}
 }
 .scaffold-toolbar-expanded .scaffold-toolbar .toolbar{background-color:#292929}
-@media (max-width:991px){
+@media (max-width:991.98px){
 .scaffold-toolbar-expanded .scaffold-toolbar{min-height:calc(100vh - 45px);padding:8px;flex:1 0 100%;display:block}
 .scaffold-toolbar-expanded .scaffold-toolbar .toolbar-item{padding:4px}
 }
@@ -2468,11 +2468,11 @@ body.with-overflow{overflow:auto}
 @media (min-width:992px){
 .scaffold-modulemenu-expanded .scaffold-content-overlay{display:none}
 }
-@media (max-width:991px){
+@media (max-width:991.98px){
 .scaffold .scaffold-modulemenu{display:none}
 }
 .scaffold-modulemenu-expanded .scaffold-modulemenu{width:240px}
-@media (max-width:991px){
+@media (max-width:991.98px){
 .scaffold-modulemenu-expanded .scaffold-modulemenu{display:block}
 }
 .scaffold-content-navigation-drag{display:none;flex:0 0 auto;width:1px;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:3;background-color:#c8c8c8;transition:background-color .2s ease-in-out,border .2s ease-in-out}
@@ -2508,7 +2508,7 @@ typo3-backend-navigation-switcher{display:flex}
 .topbar-button-search,.topbar-button-toolbar{display:none}
 }
 .topbar-header{padding-left:40px}
-@media (max-width:991px){
+@media (max-width:991.98px){
 .topbar-header{padding-right:40px!important}
 }
 .topbar-header-site{overflow:hidden;position:relative;max-width:100%;height:45px;line-height:45px;padding-left:1em;padding-right:1em;white-space:nowrap}
@@ -2544,7 +2544,7 @@ typo3-backend-navigation-switcher{display:flex}
 @media (min-width:992px){
 .toolbar-item .dropdown-menu{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
 }
-@media (max-width:991px){
+@media (max-width:991.98px){
 .toolbar-item .dropdown-menu{position:fixed!important;width:100%!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-height:calc(100vh - 2rem)}
 }
 .toolbar-item-avatar{margin-right:2px;display:inline-block;vertical-align:middle}
@@ -3419,7 +3419,7 @@ a.card:hover{text-decoration:none;border:1px solid #b3b3b3;transform:translate(0
 .card-size-medium{width:calc(50% - 20px)}
 }
 .card-size-fixed-small{width:calc(100% - 20px)}
-@media (min-width:624px){
+@media (min-width:576px){
 .card-size-fixed-small{width:calc(50% - 20px)}
 }
 @media (min-width:768px){
@@ -3794,9 +3794,6 @@ span.dragIcon{display:inline-block;height:16px}
 .text-normal{font-weight:400}
 .text-pre-wrap{white-space:pre-wrap}
 .text-wrap-allowed{word-break:break-all;overflow-wrap:break-word}
-@media (min-width:768px){
-.dl-horizontal dt{text-align:left}
-}
 a.disabled{color:#d7d7d7;pointer-events:none;opacity:.4}
 .media-new-content-element-wizard .media-left input{margin-left:2px}
 .history-block{border-left:5px solid #a9a9a9;border-bottom:1px dotted #a9a9a9}
@@ -3823,7 +3820,7 @@ a.disabled{color:#d7d7d7;pointer-events:none;opacity:.4}
 .card-login .card-body{padding:1.75em 2.5em 2.5em}
 .card-login .card-footer{padding:1.5em 2.5em;border-top:3px solid #f80;border-bottom-left-radius:2px;border-bottom-right-radius:2px}
 .card-login a{font-weight:700}
-@media (max-width:767px){
+@media (max-width:767.98px){
 .card-login{margin-bottom:0}
 }
 .card-login.card-mfa .card-heading .h2,.card-login.card-mfa .card-heading h2{margin:.75rem 0}
diff --git a/typo3/sysext/form/Resources/Public/Css/form.css b/typo3/sysext/form/Resources/Public/Css/form.css
index 66e3cf427d75..2664f8ef329a 100644
--- a/typo3/sysext/form/Resources/Public/Css/form.css
+++ b/typo3/sysext/form/Resources/Public/Css/form.css
@@ -161,7 +161,7 @@
 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn{background-color:#fff;border-color:#fff}
 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn.active,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:focus,#t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn:hover{background-color:#ebf3fb}
 #t3-form-stage-container.t3-form-stage-viewmode-abstract .panel.t3-form-form-stage-selected>.panel-heading .btn .icon svg path{fill:#0078e6}
-@media (max-width:1199px){
+@media (max-width:1199.98px){
 #t3-form-stage-container.t3-form-stage-viewmode-preview #t3-form-stage-inner-container{width:600px}
 }
 #t3-form-stage-container.t3-form-stage-viewmode-preview input[type=date],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=password],#t3-form-stage-container.t3-form-stage-viewmode-preview input[type=text],#t3-form-stage-container.t3-form-stage-viewmode-preview select,#t3-form-stage-container.t3-form-stage-viewmode-preview textarea{color:#000;background-color:#e5e5e5}