Better screen breakpoint mixins and classes

frontend/src/styles/layout.scss

@@ -15,3 +15,43 @@ $breakpoints: (
     }
   }
 }
+
+.hidden {
+  display: none !important;
+}
+
+@mixin from($key) {
+  @media (min-width: map.get($breakpoints, $key)) {
+    @content;
+  }
+}
+
+@mixin until($key) {
+  @media (max-width: #{map.get($breakpoints, $key) - 1}) {
+    @content;
+  }
+}
+
+.from.desktop {
+  @include until(desktop) {
+    display: none !important;
+  }
+}
+
+.from.tablet {
+  @include until(tablet) {
+    display: none !important;
+  }
+}
+
+.until.tablet {
+  @include from(tablet) {
+    display: none !important;
+  }
+}
+
+.until.desktop {
+  @include from(desktop) {
+    display: none !important;
+  }
+}