diff --git a/fwt/styles/Viewport.sass b/fwt/styles/Viewport.sass
index 1e0b5bc..6c4b1f0 100644
--- a/fwt/styles/Viewport.sass
+++ b/fwt/styles/Viewport.sass
@@ -1 +1 @@
-@use '/src/styles/classes.sass'
+@use '/src/styles/breakpoint.sass'
diff --git a/src/styles/breakpoint.sass b/src/styles/breakpoint.sass
index 1cc2a53..7ccdc2b 100644
--- a/src/styles/breakpoint.sass
+++ b/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
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
index 81228b3..4e8b0e5 100644
--- a/src/styles/classes.sass
+++ b/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