diff --git a/styles/abstracts/_mixins.scss b/styles/abstracts/_mixins.scss
index 93240f6..8b5dd73 100644
--- a/styles/abstracts/_mixins.scss
+++ b/styles/abstracts/_mixins.scss
@@ -1,3 +1,5 @@
+@import "variables";
+
 @mixin display-flex($content: center, $items: center, $direction: row) {
   display: flex;
   justify-content: #{$content};
@@ -47,3 +49,9 @@
     border-color: transparent $triangle-color transparent transparent;
   }
 }
+
+@mixin breakpoint($query, $no-query: false) {
+  @include breakpoints.breakpoint($query, $no-query) {
+    @content;
+  }
+}