diff --git a/styles/mixins.module.scss b/styles/mixins.module.scss
new file mode 100644
index 0000000..9135789
--- /dev/null
+++ b/styles/mixins.module.scss
@@ -0,0 +1,25 @@
+@import "variables.module";
+
+@mixin sm {
+  @media (min-width: #{$screen-sm-min}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: #{$screen-md-min}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: #{$screen-lg-min}) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: #{$screen-xl-min}) {
+    @content;
+  }
+}
diff --git a/styles/variables.module.scss b/styles/variables.module.scss
new file mode 100644
index 0000000..674f615
--- /dev/null
+++ b/styles/variables.module.scss
@@ -0,0 +1,4 @@
+$screen-sm-min: 640px;
+$screen-md-min: 768px;
+$screen-lg-min: 1024px;
+$screen-xl-min: 1280px;