diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss
index a9273e3d9..4b2d52256 100644
--- a/src/styles/isomer-template/components/homepage/_hero.scss
+++ b/src/styles/isomer-template/components/homepage/_hero.scss
@@ -16,7 +16,7 @@
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: map.get($breakpoints, "md")) {
+@media screen and (min-width: map-get($breakpoints, "md")) {
   .hero-floating {
     padding: 3rem;
   }
@@ -60,7 +60,7 @@
   width: 50%;
 }
 
-@media screen and (min-width: map.get($breakpoints, "xl")) {
+@media screen and (min-width: map-get($breakpoints, "xl")) {
   .hero-side-sm {
     width: 50%;
   }
@@ -80,7 +80,7 @@
   }
 }
 
-@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) {
+@media screen and ((max-width: (map-get($breakpoints, "xl") - 1))) {
   .hero-side-sm {
     width: 33%;
   }
diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss
index e3eb92f3e..54d739564 100644
--- a/src/styles/isomer-template/theme/_breakpoints.scss
+++ b/src/styles/isomer-template/theme/_breakpoints.scss
@@ -11,4 +11,4 @@ $breakpoints: (
 );
 
 // Maximum width of site contents
-$container-max-width: map.get($breakpoints, "xl");
+$container-max-width: map-get($breakpoints, "xl");
diff --git a/src/styles/isomer-template/theme/_display.scss b/src/styles/isomer-template/theme/_display.scss
index 09fff1a29..0d2b0d667 100644
--- a/src/styles/isomer-template/theme/_display.scss
+++ b/src/styles/isomer-template/theme/_display.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 
-@media screen and (min-width: map.get($breakpoints, "lg")),
-  screen and (max-width: (map.get($breakpoints, "md") - 1)) {
+@media screen and (min-width: map-get($breakpoints, "lg")),
+  screen and (max-width: (map-get($breakpoints, "md") - 1)) {
   .is-visible-tablet-only {
     display: none !important;
   }