mobile styles

src/App.vue

@@ -85,4 +85,9 @@
     &:hover
       background-color: var(--dark-bg3)
       border: 4px solid var(--dark-bg2)
+
+  @media only screen and (max-width: 872px)
+    .gractwoRoot
+      h1
+        display: none
 </style>

src/components/card.vue

@@ -48,4 +48,11 @@
     &:focus,&:hover
       background-color: var(--dark-bg3)
       transform: scale(1.05)
+
+  @media only screen and (max-width: 872px)
+    .card
+      font-size: .8em
+      width: 18rem
+      img
+        width: 64px
 </style>

src/views/Home.vue

@@ -3,7 +3,8 @@
     <div class="first">
       <h1>Witajcie w Gractwie!</h1>
       <p>
-        Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie? <br>
+        Jesteśmy społecznością - grupą ludzi - których kręcą gry. Proste, nie?
+        <br />
       </p>
       <gractwosvg class="g" />
     </div>
@@ -60,7 +61,7 @@ export default defineComponent({
     name: 'Home',
     components: {
       gractwosvg,
-    card
+      card,
     },
   });
 </script>
@@ -90,4 +91,12 @@ export default defineComponent({
       transform: rotate(-9deg) scale(0.9)
     100%
       transform: rotate(5deg)
+
+  @media only screen and (max-width: 872px)
+    main
+      padding: 3rem 1rem
+      .g
+        position: absolute
+        top: 8.5%
+        width: 184px
 </style>