feat: adding media-queries mixins

frontend/src/styles/index.scss

@@ -1,5 +1,7 @@
 @import "mixins/normalize";
 
+@import "mixins/media-queries";
+
 @import "vendors/toastify.css";
 
 @import "animations";

frontend/src/styles/mixins/_media-queries.scss

@@ -0,0 +1,42 @@
+/* ============================================
+=                  Media queries              =
+Use these mixins like this:
+.example-class{
+  display: flex;
+  flex-direction: row;
+
+  @include xs{
+    flex-direction: column;
+  }
+}
+============================================ */
+
+@mixin xs {
+  @media (min-width: map-get($media, xs)) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (min-width: map-get($media, sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: map-get($media, md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: map-get($media, lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: map-get($media, xl)) {
+    @content;
+  }
+}

frontend/vite.config.ts

@@ -10,7 +10,7 @@ export default ({ mode }: { mode: string }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "./src/styles/_variables.scss";`,
+          additionalData: `@import "./src/styles/_variables.scss"; @import "./src/styles/mixins/_media-queries.scss";`,
         },
       },
     },