Moved viewport to breakpoint

fwt/styles/Viewport.sass

@@ -1 +1 @@
-@use '/src/styles/classes.sass'
+@use '/src/styles/breakpoint.sass'

src/styles/breakpoint.sass

@@ -1,3 +1,51 @@
 $mobile: 375px
 $tablet: 768px
 $desktop: 1440px
+
+.on-desktop-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none
+
+.on-mobile-only
+  @media only screen and (min-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $tablet)
+    display: none
+
+.on-desktop-tablet-only
+  @media only screen and (min-width: 0px) and (max-width: $tablet)
+    display: none
+
+  @media only screen and (min-width: $tablet)
+    display: block
+
+.on-desktop-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $mobile)
+    display: block
+
+  @media only screen and (min-width: $mobile) and (max-width: $desktop)
+    display: none
+
+  @media only screen and (min-width: $desktop)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (min-width: 0px) and (max-width: $desktop)
+    display: block
+
+  @media only screen and (min-width: $desktop)
+    display: none

src/styles/classes.sass

@@ -1,5 +1,3 @@
-@use './breakpoint' as view
-
 .fullscreen
   position: absolute
   top: 0
@@ -9,51 +7,3 @@
   object-fit: cover
   z-index: -1
   opacity: 1
-
-.on-desktop-only
-  @media only screen and (min-width: 0px) and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (min-width: view.$desktop)
-    display: block
-
-.on-tablet-only
-  @media only screen and (min-width: 0px) and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (min-width: view.$tablet) and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (min-width: view.$desktop)
-    display: none
-
-.on-mobile-only
-  @media only screen and (min-width: view.$mobile)
-    display: block
-
-  @media only screen and (min-width: view.$tablet)
-    display: none
-
-.on-desktop-tablet-only
-  @media only screen and (min-width: 0px) and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (min-width: view.$tablet)
-    display: block
-
-.on-desktop-mobile-only
-  @media only screen and (min-width: 0px) and (max-width: view.$mobile)
-    display: block
-
-  @media only screen and (min-width: view.$mobile) and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (min-width: view.$desktop)
-    display: block
-
-.on-tablet-mobile-only
-  @media only screen and (min-width: 0px) and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (min-width: view.$desktop)
-    display: none