diff --git a/packages/web/src/scss/components/Alert/_Alert.scss b/packages/web/src/scss/components/Alert/_Alert.scss
index d15509f6ba..77a93451af 100644
--- a/packages/web/src/scss/components/Alert/_Alert.scss
+++ b/packages/web/src/scss/components/Alert/_Alert.scss
@@ -25,7 +25,6 @@
 }
 
 @include dictionaries.generate-colors('Alert', theme.$color-dictionary, theme.$color-dictionary-config);
-
 @include dictionaries.generate-colors(
     'Alert',
     theme.$color-dictionary,
diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss
index fb97869a15..8d0c1f499b 100644
--- a/packages/web/src/scss/components/Button/_Button.scss
+++ b/packages/web/src/scss/components/Button/_Button.scss
@@ -44,7 +44,6 @@
     $overrides: theme.$color-dictionary-overrides,
     $generate-data-attribute: true
 );
-
 @include dictionaries.generate-sizes('Button', theme.$sizes);
 
 .Button--block {
diff --git a/packages/web/src/scss/components/Grid/_Grid.scss b/packages/web/src/scss/components/Grid/_Grid.scss
index 87c5eb4f3f..78817865d9 100644
--- a/packages/web/src/scss/components/Grid/_Grid.scss
+++ b/packages/web/src/scss/components/Grid/_Grid.scss
@@ -25,5 +25,4 @@
 }
 
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
-
 @include tools.item(theme.$breakpoints);
diff --git a/packages/web/src/scss/components/Tag/_Tag.scss b/packages/web/src/scss/components/Tag/_Tag.scss
index c58bd11c7f..b183232b54 100644
--- a/packages/web/src/scss/components/Tag/_Tag.scss
+++ b/packages/web/src/scss/components/Tag/_Tag.scss
@@ -12,7 +12,6 @@
 }
 
 @include dictionaries.generate-sizes('Tag', theme.$sizes);
-
 @include dictionaries.generate-colors(
     'Tag',
     theme.$color-dictionary,
@@ -20,7 +19,6 @@
     null,
     theme.$color-dictionary-overrides
 );
-
 @include dictionaries.generate-colors(
     'Tag--subtle.Tag',
     theme.$color-dictionary,
diff --git a/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss b/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss
index e504ef89eb..4793eba7d7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Section/_UNSTABLE_Section.scss
@@ -2,7 +2,7 @@
     margin-bottom: 2.5rem;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
     .UNSTABLE_Section:not(:last-child) {
         margin-bottom: 4rem;
     }
diff --git a/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss b/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss
index 16f79f39a9..4a872ce613 100644
--- a/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_breakpoint.test.scss
@@ -13,7 +13,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: 600px) {
+                @media (width >= 600px) {
                     .selector {
                         color: #bada55;
                     }
@@ -53,7 +53,7 @@
             }
 
             @include test.expect() {
-                @media (max-width: 599px) {
+                @media (width <= 599px) {
                     .selector {
                         color: #bada55;
                     }
diff --git a/packages/web/src/scss/tools/__tests__/_form-fields.test.scss b/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
index d5b842ddd9..3ccf5f1d5d 100644
--- a/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_form-fields.test.scss
@@ -11,6 +11,7 @@
                     @include form-fields.label-disabled();
                 }
             }
+
             @include test.expect() {
                 .label-disabled-test {
                     color: form-fields-theme.$label-color-disabled;
@@ -30,6 +31,7 @@
                     @include form-fields.input-disabled();
                 }
             }
+
             @include test.expect() {
                 .input-disabled-test {
                     color: form-fields-theme.$input-color-disabled;
@@ -46,6 +48,7 @@
                     @include form-fields.box-field-fluid();
                 }
             }
+
             @include test.expect() {
                 .box-field-fluid-test {
                     width: 100%;
diff --git a/packages/web/src/scss/tools/__tests__/_typography.test.scss b/packages/web/src/scss/tools/__tests__/_typography.test.scss
index 9acccbbe59..c45b87740a 100644
--- a/packages/web/src/scss/tools/__tests__/_typography.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_typography.test.scss
@@ -27,7 +27,7 @@
             }
 
             @include test.expect() {
-                @media (min-width: map.get(tokens.$breakpoints, 'tablet')) {
+                @media (width >= #{map.get(tokens.$breakpoints, 'tablet')}) {
                     .typography-test {
                         font-style: italic;
                         font-weight: 700;
diff --git a/packages/web/src/scss/tools/_breakpoint.scss b/packages/web/src/scss/tools/_breakpoint.scss
index e84dee2c7a..9301384490 100644
--- a/packages/web/src/scss/tools/_breakpoint.scss
+++ b/packages/web/src/scss/tools/_breakpoint.scss
@@ -1,13 +1,15 @@
-// Mixin to get the min-width media query for a breakpoint value.
+@use 'sass:string';
+
+// Mixin to get the width media query for a breakpoint value in up direction.
 //
 // Example: up(0) { … } will return …
-// Example: up(768px) { … } will return @media (min-width: 768px) { … }
+// Example: up(768px) { … } will return @media (width >= 768px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin up($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (min-width: $breakpoint-value) {
+        @media (width >= $breakpoint-value) {
             @content;
         }
     } @else {
@@ -15,16 +17,16 @@
     }
 }
 
-// Mixin to get the max-width media query for a breakpoint value.
+// Mixin to get the width media query for a breakpoint value in down direction.
 //
 // Example: down(0) { … } will return …
-// Example: down(768px) { … } will return @media (max-width: 767px) { … }
+// Example: down(768px) { … } will return @media (width <= 767px) { … }
 //
 // Parameters are:
 // * $breakpoint-value: the breakpoint value (in pixels)
 @mixin down($breakpoint-value) {
     @if $breakpoint-value > 0 {
-        @media (max-width: ($breakpoint-value - 1px)) {
+        @media (width <= ($breakpoint-value - 1px)) {
             @content;
         }
     } @else {
@@ -45,10 +47,10 @@
 @function get-modifier($modifier, $name, $breakpoint-value) {
     @if $breakpoint-value > 0 {
         @if $modifier == 'infix' {
-            @return unquote($name + '--');
+            @return string.unquote($name + '--');
         }
 
-        @return unquote('-' + $name);
+        @return string.unquote('-' + $name);
     }
 
     @return '';
diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss
index 6582e6a908..2687016692 100644
--- a/packages/web/src/scss/tools/_dictionaries.scss
+++ b/packages/web/src/scss/tools/_dictionaries.scss
@@ -1,5 +1,6 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:string';
 @use '@tokens' as tokens;
 @use './links';
@@ -15,14 +16,17 @@
     @if map.has-key(tokens.$action-colors, #{$variant}-default) {
         @return tokens.$action-colors;
     }
+
     @if map.has-key(tokens.$emotion-colors, #{$variant}-default) {
         @return tokens.$emotion-colors;
     }
+
     @if map.has-key(tokens.$text-colors, #{$variant}-default) {
         @return tokens.$text-colors;
     }
 
     @error 'Invalid color dictionary value as there is no #{$variant}-default token either in action-colors, emotion-colors, or text-colors tokens';
+
     @return null;
 }
 
@@ -53,13 +57,16 @@
                 @return map.get($overrides, $dictionary-value, states, $state-name, $property-name);
             }
         }
+
         @if map.has-key($overrides, $dictionary-value, $property-name) {
             @return map.get($overrides, $dictionary-value, $property-name);
         }
     }
-    @if type-of($property-value) == 'string' {
+
+    @if meta.type-of($property-value) == 'string' {
         $tokens: -get-color-dictionary-tokens($dictionary-value);
-        @if type-of($tokens) == 'map' {
+
+        @if meta.type-of($tokens) == 'map' {
             @return map.get($tokens, #{$dictionary-value}-#{$property-value});
         }
     } @else {
@@ -166,6 +173,7 @@
     @each $dictionary-value in $dictionary-values {
         @each $print-value in $print-values {
             $variant-class: '#{$dictionary-value}';
+
             @if $print-value == 'disabled' {
                 $variant-class: '#{$dictionary-value}.link-#{$print-value}';
             } @else if $print-value != 'default' {
diff --git a/packages/web/src/scss/tools/_list.scss b/packages/web/src/scss/tools/_list.scss
index 87c292e942..7d0ba44f6d 100644
--- a/packages/web/src/scss/tools/_list.scss
+++ b/packages/web/src/scss/tools/_list.scss
@@ -5,10 +5,10 @@
 @function to-string($list, $separator: ' ') {
     $string: '';
 
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
         $string: $string + list.nth($list, $i);
 
-        @if $i < length($list) {
+        @if $i < list.length($list) {
             $string: $string + $separator;
         }
     }