diff --git a/app/styles/dependencies/responsive.scss b/app/styles/dependencies/responsive.scss
new file mode 100644
index 00000000..4c82382f
--- /dev/null
+++ b/app/styles/dependencies/responsive.scss
@@ -0,0 +1,18 @@
+// - Hey, there is a mixin here instead of in mixins.scss!!! Are you drunk or what?
+// - I know, I know, but look it closer, it makes sense
+// - Oh, I see. It's ok for this time...
+
+$break-small: 320px;
+$break-large: 1024px;
+
+@mixin respond-to($media) {
+    @if $media == handhelds {
+        @media only screen and (max-width: $break-small) { @content; }
+    }
+    @else if $media == medium-screens {
+        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+    }
+    @else if $media == wide-screens {
+        @media only screen and (min-width: $break-large) { @content; }
+    }
+}
diff --git a/app/styles/responsive/mobile.scss b/app/styles/responsive/mobile.scss
deleted file mode 100755
index 4ae842ee..00000000
--- a/app/styles/responsive/mobile.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Mobile Media Query
diff --git a/app/styles/responsive/screen.scss b/app/styles/responsive/screen.scss
deleted file mode 100755
index 13e6d214..00000000
--- a/app/styles/responsive/screen.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Screen Media Query
-
-$break-large: 1200px;
diff --git a/app/styles/responsive/tablet.scss b/app/styles/responsive/tablet.scss
deleted file mode 100755
index 1317e6cc..00000000
--- a/app/styles/responsive/tablet.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Tablet Media Query