diff --git a/package.json b/package.json
index 6175db2..142669d 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-img": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.32.12"
+    "sass": "^1.86.3"
   },
   "dependencies": {
     "alpinejs": "^2.8.2"
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index e47db51..f70b4ae 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -1,3 +1,5 @@
+@use "mixins";
+
 :root {
     --color-grey-100: #F9FAFB;
     --color-grey-200: #F3F4F6;
@@ -32,7 +34,7 @@ main {
 section {
     padding: 30px 0;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         padding: 60px 0;
     }
 }
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 9953c53..ea19150 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,3 +1,6 @@
+@use "sass:string";
+@use "sass:map";
+
 $breakpoints-map: (
   small: "all and (min-width: 576px)",
   medium: "all and (min-width: 768px)",
@@ -9,11 +12,11 @@ $breakpoints-map: (
 // -------------------------------------
 @mixin mq($breakpoint-name) {
   // sanitize variable
-  $breakpoint-name: unquote($breakpoint-name);
+  $breakpoint-name: string.unquote($breakpoint-name);
 
   // check if passed name is in $breakpoints-map
-  @if map-has-key($breakpoints-map, $breakpoint-name) {
-    $breakpoint-query: map-get($breakpoints-map, $breakpoint-name);
+  @if map.has-key($breakpoints-map, $breakpoint-name) {
+    $breakpoint-query: map.get($breakpoints-map, $breakpoint-name);
 
     // write media query
     @media #{$breakpoint-query} {
diff --git a/src/scss/components/_recipe.scss b/src/scss/components/_recipe.scss
index 3add6ef..a140811 100644
--- a/src/scss/components/_recipe.scss
+++ b/src/scss/components/_recipe.scss
@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-recipe__header-image {
     width: 100%;
     object-fit: cover;
@@ -36,7 +38,7 @@
     flex-direction: column;
     gap: 30px;
     
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         display: grid;
         grid-template-columns: 400px 1fr;
         grid-template-rows: min-content 1fr;
@@ -52,7 +54,7 @@
     flex-wrap: wrap;
     gap: 12px;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: tags;
         margin-bottom: 0;
     }
@@ -60,7 +62,7 @@
 
 
 .c-recipe__ingredients-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: ingredients;
     }
 }
@@ -83,7 +85,7 @@
 }
 
 .c-recipe__instructions-wrapper {
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         grid-area: instructions;
     }
 }
\ No newline at end of file
diff --git a/src/scss/components/_search.scss b/src/scss/components/_search.scss
index 6646bb7..386a902 100644
--- a/src/scss/components/_search.scss
+++ b/src/scss/components/_search.scss
@@ -1,3 +1,5 @@
+@use "../mixins";
+
 .c-search__search-toggle {
     margin-left: 20px;
     padding: 10px;
@@ -31,7 +33,7 @@
     box-shadow: var(--shadow-xl);
     font-size: 1rem;
 
-    @include mq(medium) {
+    @include mixins.mq(medium) {
         max-width: 500px;
     }
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index fdf1e98..49e4359 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,15 +1,15 @@
-@import "reset.scss";
-@import "mixins.scss";
-@import "utility.scss";
-@import "global.scss";
+@use "reset";
+@use "mixins";
+@use "utility";
+@use "global";
 
-@import "typography.scss";
-@import "layout.scss";
+@use "typography";
+@use "layout";
 
-@import "components/about.scss";
-@import "components/card.scss";
-@import "components/home.scss";
-@import "components/nav.scss";
-@import "components/recipe.scss";
-@import "components/recipe-tags.scss";
-@import "components/search.scss";
+@use "components/about";
+@use "components/card";
+@use "components/home";
+@use "components/nav";
+@use "components/recipe";
+@use "components/recipe-tags";
+@use "components/search";