diff --git a/scss/_media.scss b/scss/_media.scss
new file mode 100644
index 0000000..b04d7a1
--- /dev/null
+++ b/scss/_media.scss
@@ -0,0 +1,34 @@
+@mixin media($min-max, $reverse: false) {
+  $type: max-width;
+  @if $reverse {
+    $type: min-width;
+    $min-max: $min-max + 1;
+  }
+  @media screen and ($type: $min-max) {
+    @content
+  }
+}
+
+@mixin media-mobile($reverse: false) {
+  @include media(480px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-tablet($reverse: false) {
+  @include media(768px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-small($reverse: false) {
+  @include media(1024px, $reverse) {
+    @content
+  }
+}
+
+@mixin media-large($reverse: false) {
+  @include media(1200px, $reverse) {
+    @content
+  }
+}
diff --git a/scss/default.scss b/scss/default.scss
index e5560fd..70495f0 100644
--- a/scss/default.scss
+++ b/scss/default.scss
@@ -1,3 +1,4 @@
+@import "media";
 @import "root";
 @import "all";
 
@@ -25,9 +26,9 @@ p {
 }
 
 .loading {
-  height: 300px;
+  height: 200px;
 
-  .loading-animation {
+  .loading_animation {
     margin: 20px auto;
     width: 50px;
     height: 50px;
@@ -38,7 +39,7 @@ p {
   }
 }
 
-@media screen and (max-width: 1200px) {
+@include media-small {
   .container {
     padding: 0 20px;
   }
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 346121b..ec87130 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -60,7 +60,7 @@
             margin-right: 5px;
           }
 
-          @media screen and (max-width: 790px) {
+          @include media-tablet {
             .title {
               display: none;
             }
@@ -72,16 +72,16 @@
         }
       }
 
-      @media screen and (max-width: 500px) {
+      @include media-mobile {
         padding-right: 15px;
       }
     }
-    @media screen and (max-width: 500px) {
+    @include media-mobile {
       padding: 0;
     }
   }
 
-  @media screen and (max-width: 500px) {
+  @include media-mobile {
     padding: 15px 0;
   }
 }
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index a5690b6..b09537a 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -18,6 +18,8 @@
 </template>
 
 <style lang="scss" scoped>
+@import "scss/media";
+
 .sub-page > .container .nav-btn,
 .sub-page > .container .nav .site-menu .menu-element a:not([class|=router-link-exact]) {
   color: #8D8D8D;
@@ -89,10 +91,13 @@
       }
     }
   }
-  @media screen and (max-width: 600px) {
+  @include media-tablet {
+    margin-left: 0;
+
     .nav-btn {
       display: block;
     }
+
     .site-menu {
       display: none;
       width: 100%;
@@ -110,12 +115,13 @@
         line-height: 2em;
       }
     }
+
     .menu-clicked {
       display: block;
     }
   }
 }
-@media screen and (max-width: 600px) {
+@include media-tablet {
   .container {
     justify-content: space-between;
   }
diff --git a/src/components/SelectedProjects.vue b/src/components/SelectedProjects.vue
index 3e7b08d..3db0136 100644
--- a/src/components/SelectedProjects.vue
+++ b/src/components/SelectedProjects.vue
@@ -5,11 +5,11 @@
       <div class="project"
            v-for="project in projects"
            :key="project.title.slug">
-        <img class="project-image" :src="project.image" :alt="project.title" />
-        <div class="project-content">
-          <h3 class="title">{{ project.title }}</h3>
-          <div class="release">{{ project.version }}</div>
-          <div class="description">
+        <img class="project_image" :src="project.image" :alt="project.title" />
+        <div class="project_content">
+          <h3 class="project_title">{{ project.title }}</h3>
+          <div class="project_release">{{ project.version }}</div>
+          <div class="project_description">
             <p>{{ project.short_description }}</p>
           </div>
         </div>
@@ -26,6 +26,8 @@
 </template>
 
 <style lang="scss">
+@import "scss/media";
+
 .projects {
   padding-top: 45px;
   padding-bottom: 45px;
@@ -48,27 +50,27 @@
       border-radius: 5px;
       animation: load-project 2s forwards;
 
-      .project-image {
+      .project_image {
         grid-area: image;
         width: 200px;
         height: 200px;
         object-fit: cover;
       }
 
-      .project-content {
+      .project_content {
         grid-area: content;
         padding: 10px 15px;
         height: 200px;
         overflow-y: hidden;
         position: relative;
 
-        .title {
+        .project_title {
           font-size: 1.3em;
           font-weight: normal;
           line-height: 1.5em;
         }
 
-        .release {
+        .project_release {
           font-size: .9em;
           font-weight: bold;
           padding: 5px 0;
@@ -90,7 +92,7 @@
       }
     }
 
-    @media screen and (min-width: 900px) {
+    @include media-tablet(true) {
       .project {
         .more-button {
           display: flex;
@@ -109,6 +111,7 @@
           &:hover {
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
+
             .btn {
               display: flex;
               color: white;
@@ -122,18 +125,17 @@
       }
     }
 
-    @media screen and (max-width: 900px) {
+    @include media-small {
       .project {
         display: block;
 
-        .project-image {
+        .project_image {
           width: 100%;
           height: 250px;
         }
 
-        .project-content {
-          height: auto;
-          max-height: 250px;
+        .project_content {
+          height: 125px;
         }
 
         .more-button {
@@ -143,6 +145,7 @@
           height: auto;
           left: unset;
           top: unset;
+
           .btn {
             display: flex;
             width: 100%;
@@ -166,7 +169,7 @@
   }
 }
 
-@media screen and (max-width: 600px) {
+@include media-tablet {
   .projects .container {
     grid-template-columns: 1fr;
     padding: 25px;
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 45fdece..22518a9 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -1,21 +1,21 @@
 <template>
   <section class="project" v-if="project">
-    <header class="project-header">
+    <header class="project_header">
       <h1>{{ project.title }}</h1>
-      <ul class="project-info">
-        <li class="info-text">
+      <ul class="project_info">
+        <li class="info_text">
           <font-awesome-icon class="icon" :icon="['far', 'clock']"/>
           <span>{{ project.release_data }}</span>
         </li>
-        <li class="info-text">
+        <li class="info_text">
           <font-awesome-icon class="icon" :icon="['far', 'user']"/>
           <span>{{ project.author }}</span>
         </li>
-        <li class="info-text">
+        <li class="info_text">
           <font-awesome-icon class="icon" :icon="['far', 'folder']"/>
           <span>{{ getCategoryName(project.categories)[0] }}</span>
         </li>
-        <li class="info-text">
+        <li class="info_text">
           <font-awesome-icon class="icon" :icon="['fas', 'code-branch']"/>
           <span>{{ project.version }}</span>
         </li>
@@ -83,7 +83,7 @@ export default {
 @import "scss/default";
 
 .project {
-  .project-header {
+  .project_header {
     @extend .container;
     text-align: center;
     margin-bottom: 25px;
@@ -94,12 +94,12 @@ export default {
       line-height: 2.4em;
     }
 
-    .project-info {
+    .project_info {
       display: flex;
       list-style: none;
       justify-content: center;
 
-      .info-text {
+      .info_text {
         display: flex;
         align-items: center;
 
@@ -115,7 +115,7 @@ export default {
           margin-right: 15px;
         }
       }
-      @media screen and (max-width: 560px) {
+      @include media-tablet {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         row-gap: 15px;
@@ -152,7 +152,7 @@ export default {
         text-indent: 1.5em;
         line-height: 1.8em;
 
-        @media screen and (max-width: 600px) {
+        @include media-tablet {
           font-size: 1em;
           line-height: 1.5em;
         }
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 84932d6..ec135db 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="category-menu">
+    <div class="project_categories">
       <ul class="categories">
-        <li class="category"
+        <li class="categories_element"
             v-for="category in getCategories"
             :key="category.slug"
-            :class="{ 'category-active': categories.active === category.slug }"
+            :class="{ 'categories_element-active': categories.active === category.slug }"
             @click="changeCategory(category.slug)">
           <a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
         </li>
@@ -13,13 +13,15 @@
     </div>
     <projects :projects="projects" />
     <div v-if="projects.length === 0" class="loading">
-      <div class="loading-animation"></div>
+      <div class="loading_animation"></div>
     </div>
   </div>
 </template>
 
 <style lang="scss">
-.category-menu {
+@import "scss/media";
+
+.project_categories {
   padding-top: 45px;
 
   .categories {
@@ -27,7 +29,7 @@
     justify-content: center;
     list-style: none;
 
-    .category {
+    .categories_element {
       position: relative;
       cursor: pointer;
       margin-right: 25px;
@@ -59,7 +61,7 @@
         }
       }
 
-      @media screen and (max-width: 450px) {
+      @include media-mobile {
         margin-right: 15px;
       }
     }