diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
index c502f69f98..46ce1a6f4b 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
@@ -6,7 +6,7 @@
             margin-right: 0;
         }
 
-        @media screen and (min-width: var(--ds-grid-breakpoints-sm)) {
+        @media screen and (min-width: map-get($grid-breakpoints, sm)) {
             min-width: var(--ds-edit-item-button-min-width);
         }
     }
diff --git a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.scss b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.scss
index 033cea8eea..91c1423ba3 100644
--- a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.scss
+++ b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.scss
@@ -6,7 +6,7 @@
       margin-right: 0;
     }
 
-    @media screen and (min-width: var(--ds-grid-breakpoints-sm)) {
+    @media screen and (min-width: map-get($grid-breakpoints, sm)) {
       min-width: var(--ds-edit-item-button-min-width);
     }
   }
diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
index c60f2f9ff9..5384f90cec 100644
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
+++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
@@ -1,4 +1,4 @@
-@media screen and (min-width: var(--ds-grid-breakpoints-md)) {
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;
     }
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 152c8dbaee..b297979fd0 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,4 +1,4 @@
-@media screen and (max-width: var(--ds-grid-breakpoints-md)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
     :host.open {
         background-color: var(--bs-white);
         top: 0;
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index c1d31e4e60..0263a566cc 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,6 +1,6 @@
 .navbar-brand img {
     height: var(--ds-header-logo-height);
-    @media screen and (max-width: var(--ds-grid-breakpoints-sm)) {
+    @media screen and (max-width: map-get($grid-breakpoints, sm)) {
         height: var(--ds-header-logo-height-xs);
     }
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 044c196545..8059a4b027 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -11,7 +11,7 @@
 }
 
 /** Mobile menu styling **/
-@media screen and (max-width: var(--ds-grid-breakpoints-md)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
     .dropdown-toggle {
         &:after {
             float: right;
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 2fa35a6f4b..8704c4e57b 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -4,7 +4,7 @@ nav.navbar {
 }
 
 /** Mobile menu styling **/
-@media screen and (max-width: var(--ds-grid-breakpoints-md)) {
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
         width: 100%;
         background-color: var(--bs-white);
@@ -17,7 +17,7 @@ nav.navbar {
     }
 }
 
-@media screen and (min-width: var(--ds-grid-breakpoints-md)) {
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
     .reset-padding-md {
         margin-left: -calc(var(--bs-spacer) / 2);
         margin-right: -calc(var(--bs-spacer) / 2);
@@ -26,7 +26,7 @@ nav.navbar {
 
 /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
 .navbar-expand-md.navbar-container {
-    @media screen and (max-width: var(--ds-grid-breakpoints-md)) {
+    @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .container {
             padding: 0 var(--bs-spacer);
         }
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index 4de51a36dd..dfebd2c94d 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -16,7 +16,7 @@ a.submit-icon {
 
 
 
-@media screen and (max-width: var(--ds-grid-breakpoints-sm)) {
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
   #query:focus {
     max-width: 250px !important;
     width: 40vw !important;
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.scss b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
index c0b1a917f4..ab58313867 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.scss
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
@@ -37,7 +37,7 @@
   transform: translate(-50%, -50%);
 }
 
-@media screen and (max-width: var(--ds-grid-breakpoints-sm)) {
+@media screen and (max-width: map-get($grid-breakpoints, sm)) {
   .notifications-wrapper {
     width: auto;
     left: 0;
diff --git a/src/themes/mantis/app/+home-page/home-page.component.scss b/src/themes/mantis/app/+home-page/home-page.component.scss
index 64d2ba66ca..d4350c1e13 100644
--- a/src/themes/mantis/app/+home-page/home-page.component.scss
+++ b/src/themes/mantis/app/+home-page/home-page.component.scss
@@ -7,7 +7,7 @@ div.background-image {
     background-position-y: -200px;
     background-image: url('/assets/images/banner.jpg');
     background-size: cover;
-    @media screen and (max-width: var(--bs-lg)) {
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
         background-position-y: 0;
     }
 
diff --git a/src/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss b/src/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss
index 501e2a7562..6d12fcec71 100644
--- a/src/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss
+++ b/src/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
diff --git a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss
index 4e0acbeccb..c0a314d715 100644
--- a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss
+++ b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
diff --git a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss
index 8142b1d09d..6e418258d3 100644
--- a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss
+++ b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
diff --git a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss
index 28664b1794..d2a7c8ca46 100644
--- a/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss
+++ b/src/themes/mantis/app/entity-groups/journal-entities/item-pages/journal/journal.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
@@ -30,7 +30,7 @@
 
     .search-container {
         margin-bottom: var(--bs-spacer);
-        @media screen and (max-width: var(--bs-lg)) {
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
             width: 100%;
             max-width: none;
         }
diff --git a/src/themes/mantis/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.scss b/src/themes/mantis/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.scss
index 89c637760d..aff2622323 100644
--- a/src/themes/mantis/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.scss
+++ b/src/themes/mantis/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
diff --git a/src/themes/mantis/app/entity-groups/research-entities/item-pages/person/person.component.scss b/src/themes/mantis/app/entity-groups/research-entities/item-pages/person/person.component.scss
index c6049438dd..51c15716f9 100644
--- a/src/themes/mantis/app/entity-groups/research-entities/item-pages/person/person.component.scss
+++ b/src/themes/mantis/app/entity-groups/research-entities/item-pages/person/person.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }
@@ -30,7 +30,7 @@
 
     .search-container {
         margin-bottom: var(--bs-spacer);
-        @media screen and (max-width: var(--bs-lg)) {
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
             width: 100%;
             max-width: none;
         }
diff --git a/src/themes/mantis/app/entity-groups/research-entities/item-pages/project/project.component.scss b/src/themes/mantis/app/entity-groups/research-entities/item-pages/project/project.component.scss
index 502b5102ca..076baad1a0 100644
--- a/src/themes/mantis/app/entity-groups/research-entities/item-pages/project/project.component.scss
+++ b/src/themes/mantis/app/entity-groups/research-entities/item-pages/project/project.component.scss
@@ -17,7 +17,7 @@
     }
 
     ds-metadata-field-wrapper {
-        @media screen and (max-width: var(--bs-md)) {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
             flex: 1;
             padding-right: calc(var(--bs-spacer) / 2);
         }