Small media query adjustments

1 files changed, 19 insertions, 0 deletions

diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
index 5a05ec3..3495b1b 100644
--- a/sass/abstracts/_mixins.scss
+++ b/sass/abstracts/_mixins.scss
@@ -42,3 +42,22 @@
   margin: 8rem auto;
   width: 80%;
 }
+
+// media queries
+@mixin responsive($breakpoint) {
+  @if $breakpoint == phone {
+    @media screen and (max-width: 600px) {
+      @content;
+    }
+  }
+  @if $breakpoint == tablet {
+    @media screen and (max-width: 980px) {
+      @content;
+    }
+  }
+  @if $breakpoint == laptop {
+    @media screen and (max-width: 1400px) {
+      @content;
+    }
+  }
+}