diff --git a/styles/mixins.scss b/styles/mixins.scss
new file mode 100644
index 00000000..c96a367f
--- /dev/null
+++ b/styles/mixins.scss
@@ -0,0 +1,28 @@
+// use with @include
+@mixin breakpoint($breakpoint) {
+  $phone-width: 430px;
+  $phone-height: 850px;
+
+  $tablet-width: 1024px;
+  $tablet-height: 1024px;
+
+  @if $breakpoint == tablet {
+    // prettier-ignore
+    @media only screen 
+      and (max-width: $tablet-width)
+      and (max-height: $tablet-height)
+      and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+      }
+  }
+
+  @if $breakpoint == phone {
+    // prettier-ignore
+    @media only screen 
+       and (max-width: $phone-width) 
+       and (max-height: $phone-height) 
+       and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+       }
+  }
+}
diff --git a/styles/variables.scss b/styles/variables.scss
index 2664dab6..e602b20d 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -1,4 +1,5 @@
 // @import 'include-media/dist/_include-media';
+@import 'mixins.scss';
 
 // Breakpoints
 $breakpoints: (