diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 7d23b65..69a7c70 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -179,7 +179,7 @@ h1 {
   border-right: 1px solid #333;
 }
 
-@media only screen and (max-width: 768px) {
+@include mobile {
   .purchase,
   .win {
     width: 100vw;
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index d8747bc..0a87411 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -111,6 +111,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
 .chartjsLegend li span {
   display: inline-block;
   width: 12px;
@@ -119,7 +121,7 @@ export default {
   border-radius: 25px;
 }
 
-@media only screen and (max-width: 768px) {
+@include mobile {
   canvas {
     height: 50vh;
   }
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index be5a474..aa791f7 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -98,6 +98,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
 .inner-bought-container {
   display: flex;
   flex-direction: column;
@@ -158,7 +160,8 @@ export default {
 .blue {
   color: #57d2fb;
 }
-@media only screen and (max-width: 768px) {
+
+@include mobile {
   .bought-container {
     flex-wrap: wrap;
     flex-direction: column;
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 21c2fce..6b2b0ca 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -92,7 +92,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@media only screen and (max-width: 768px) {
+@import "../styles/media-queries.scss";
+
+@include mobile {
   canvas {
     height: 50vh;
   }