remove css variables in media queries

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

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

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

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;

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

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;

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

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;

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;

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

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

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

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

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

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

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

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