Replaced all mobile media queries with scss mixin.

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;

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;
   }

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;

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;
   }