tablet reponsive

src/_includes/partials/components/nav.njk

@@ -1,6 +1,6 @@
 {% if navigation.items %}
   <nav class="nav" aria-label="{{ariaLabel}}">
-    <ul class="[ nav__list ] [ box-flex align-center md:space-before ]">
+    <ul class="[ nav__list ]">
       {% for item in navigation.items %}
         {% set relAttribute = '' %}
         {% set currentAttribute = '' %}

src/scss/components/_intro.scss

@@ -42,6 +42,59 @@
   }
 }
 
+@media (min-width: 768px) and (max-width: 1199.98px) {
+  .intro {
+    margin-top: 4rem;
+
+    &__heading {
+      width: 100%;
+      max-width: none;
+
+      + svg {
+        order: 1;
+        margin-right: auto;
+      }
+    }
+
+    .btn-grp {
+      margin-top: auto;
+      margin-right: auto;
+      margin-bottom: 4rem;
+    }
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .intro {
+    margin-top: 3rem;
+
+    &__heading {
+      font-size: 1.75rem;
+
+      + svg {
+        margin: 2rem auto 0;
+        max-width: 7rem;
+        order: 0;
+      }
+    }
+
+    .btn-grp {
+      display: flex;
+      width: auto;
+      flex-direction: column;
+      align-items: center;
+      margin-top: auto;
+      margin-bottom: auto;
+      margin-right: auto;
+
+      .btn + .btn {
+        margin-left: 0;
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}
+
 @media (max-width: 575.98px) {
   .intro {
     margin-top: 3rem;
@@ -52,16 +105,17 @@
       + svg {
         margin: 2rem auto 0;
         max-width: 7rem;
+        order: 0;
       }
     }
 
     .btn-grp {
-      margin-top: 0;
       display: flex;
-      width: 100%;
       flex-direction: column;
       align-items: center;
       margin-top: 2rem;
+      margin-bottom: 0;
+      width: 100%;
 
       .btn + .btn {
         margin-left: 0;

src/scss/components/_member-list.scss

@@ -52,12 +52,25 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .member-list {
     &__heading {
       margin: 4rem 0;
+      font-size: 1.75rem;
+    }
+  }
 }
 
+@media (max-width: 991.98px) {
+  .member-list {
+    &__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .member-list {
     &__items {
       display: block;
     }

src/scss/components/_nav.scss

@@ -5,6 +5,9 @@
     margin: -.5rem;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 
     &::-webkit-scrollbar {
       display: none;
@@ -35,8 +38,12 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .nav {
     margin-top: 1rem;
+
+    &__list {
+      justify-content: flex-start;
+    }
   }
 }

src/scss/components/_post.scss

@@ -330,7 +330,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .post {
     &__body {
       h1 {
@@ -351,7 +351,20 @@
       }
 
       .process-cae {
+        &__block {
+          .small-boat {
+            margin-left: auto;
+          }
+        }
+      }
+    }
+  }
+}
 
+@media (max-width: 575.98px) {
+  .post {
+    &__body {
+      .process-cae {
         &.split {
           display: block;
 

src/scss/components/_posts-list.scss

@@ -69,7 +69,7 @@
   }
 }
 
-.home .news-list {
+main.home .news-list {
   margin-top: 8rem;
   margin-bottom: 24rem;
   position: relative;
@@ -80,25 +80,43 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (min-width: 768px) and (max-width: 1199.98px) {
   .news-list {
-    > svg {
+    &__items {
-      width: 70rem;
+      grid-template-columns: repeat(3, 1fr);
-      overflow: hidden;
+    }
+  }  
 }
 
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .news-list {
+    &__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  main.posts .news-list {
     &__items {
       display: block;
     }
 
-    &__item + &__item {
+    li + li {
       margin-top: 1.5rem;
     }
   }
+}
 
-  .home .news-list {
+@media (max-width: 1199.98px) {
+  main.home .news-list {
     margin: 6rem 0;
 
+    > svg {
+      width: 70rem;
+      overflow: hidden;
+    }
+
     .wrapper {
       max-width: 100%;
       margin: 0;

src/scss/components/_presentation.scss

@@ -81,7 +81,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 767.98px) {
   .presentation {
     article {
       display: block;

src/scss/components/_site-head.scss

@@ -19,7 +19,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 1199.98px) {
   .site-head {
     &__inner {
       display: block;

src/scss/components/_sponsor.scss

@@ -36,7 +36,7 @@
   }
 }
 
-@media (max-width: 575.98px) {
+@media (max-width: 767.98px) {
   .sponsor {
     &__list {
       display: flex;