chore(project): add correct namespaces in mixins

src/styles/mixins/_responsive.scss

@@ -1,35 +1,37 @@
+@use "../variables";
+
 @mixin mobile-only {
-    @media screen and (max-width: $mobile-max-width) {
-        @content;
-    }
+  @media screen and (max-width: variables.$mobile-max-width) {
+    @content;
+  }
 }
 
 @mixin mobile-only-landscape {
-    @media screen and (max-width: $mobile-max-width) and (orientation: landscape) {
-        @content;
-    }
+  @media screen and (max-width: variables.$mobile-max-width) and (orientation: landscape) {
+    @content;
+  }
 }
 
 @mixin mobile-and-tablet {
-    @media screen and (max-width: $tablet-max-width) {
-        @content;
-    }
+  @media screen and (max-width: variables.$tablet-max-width) {
+    @content;
+  }
 }
 
 @mixin tablet-only {
-    @media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
-        @content;
-    }
+  @media screen and (min-width: variables.$tablet-min-width) and (max-width: variables.$tablet-max-width) {
+    @content;
+  }
 }
 
 @mixin tablet-and-larger {
-    @media screen and (min-width: $tablet-min-width) {
-        @content;
-    }
+  @media screen and (min-width: variables.$tablet-min-width) {
+    @content;
+  }
 }
 
 @mixin desktop-only {
-    @media screen and (min-width: $desktop-min-width) {
-        @content;
-    }
+  @media screen and (min-width: variables.$desktop-min-width) {
+    @content;
+  }
 }