RWD fix for the home page

src/components/sections/About.vue

@@ -28,6 +28,8 @@
 </template>
 
 <style lang="scss">
+@import "scss/media";
+
 .about {
   background-color: var(--gray-color) !important;
 
@@ -66,7 +68,7 @@
              margin-right: 0;
            }
 
-           @media screen and (max-width: 600px) {
+           @include media-tablet {
              margin: 0 auto 15px;
 
              &:last-child {
@@ -75,18 +77,18 @@
            }
          }
 
-         @media screen and (max-width: 900px) {
+         @include media-small {
            justify-content: center;
            margin-bottom: 25px;
          }
 
-         @media screen and (max-width: 600px) {
+         @include media-tablet {
            display: block;
            margin-bottom: 25px;
          }
        }
 
-       @media screen and (max-width: 400px) {
+       @include media-mobile() {
          .buttons .btn,
          .buttons a {
            min-width: unset;
@@ -110,7 +112,7 @@
        }
      }
   }
-  @media (max-width: 900px) {
+  @include media-small {
     #grid {
       grid-template-columns: 1fr 1fr;
       grid-template-areas:

src/components/sections/Experiences.vue

@@ -159,6 +159,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "scss/media";
+
 .experiences {
   .container {
     padding-top: 45px;
@@ -212,13 +214,13 @@ export default {
         }
       }
 
-      @media screen and (max-width: 1100px) {
+      @include media-small {
         grid-template-columns: repeat(3, 1fr);
       }
-      @media screen and (max-width: 800px) {
+      @include media-tablet {
         grid-template-columns: repeat(2, 1fr);
       }
-      @media screen and (max-width: 550px) {
+      @include media-mobile {
         grid-template-columns: repeat(1, 1fr);
       }
     }

src/components/sections/FavoriteProjects.vue

@@ -8,7 +8,7 @@
     </projects>
     <div class="more-button">
       <GhostButton @click.native="$router.push('projects')">
-        RESZTA PROJEKTÓW
+        ZOBACZ WIĘCEJ
       </GhostButton>
     </div>
   </section>
@@ -57,12 +57,12 @@ export default {
     .btn {
       margin: 0 auto;
 
-      @media screen and (max-width: 600px) {
+      @include media-tablet {
         width: 100%;
       }
     }
 
-    @media screen and (max-width: 600px) {
+    @include media-tablet {
       padding: 0 25px;
     }
   }