created media queries for nav, sections, grid, footer, typography, utilities and for the base

src/sass/base/_base.scss

@@ -24,4 +24,9 @@ html {
 
 body {
   box-sizing: border-box;
+  padding: 3rem;
+
+  @include respond(tab-port) {
+    padding: 0;
+  }
 }

src/sass/base/_typography.scss

@@ -12,6 +12,11 @@
     letter-spacing: 3.5rem;
 
     animation: moveInLeft 1s ease-out;
+
+    @include respond(phone) {
+      letter-spacing: 1rem;
+      font-size: 5rem;
+    }
   }
 
   &--sub {
@@ -21,6 +26,10 @@
     letter-spacing: 1.75rem;
 
     animation: moveInRight 1s ease-out;
+
+    @include respond(phone) {
+      letter-spacing: 0.5rem;
+    }
   }
 }
 
@@ -29,7 +38,6 @@ body {
   font-weight: 400;
   line-height: 1.7;
   color: $color-grey-dark;
-  padding: 3rem;
 }
 
 .heading-secondary {
@@ -47,6 +55,14 @@ body {
   letter-spacing: 0.2rem;
   transition: all 0.2s;
 
+  @include respond(tab-port) {
+    font-size: 3rem;
+  }
+
+  @include respond(phone) {
+    font-size: 2.5rem;
+  }
+
   &:hover {
     transform: skewY(2deg) skewX(15deg) scale(1.1);
     text-shadow: $shadow-light;

src/sass/base/_utilities.scss

@@ -4,9 +4,17 @@
 
 .u-margin-bottom-big {
   margin-bottom: 8rem !important;
+
+  @include respond(tab-port) {
+    margin-bottom: 5rem !important;
+  }
 }
 .u-margin-bottom-medium {
   margin-bottom: 4rem !important;
+
+  @include respond(tab-port) {
+    margin-bottom: 3rem !important;
+  }
 }
 .u-margin-bottom-small {
   margin-bottom: 1.5rem !important;

src/sass/components/_composition.scss

@@ -8,17 +8,42 @@
     z-index: 10;
     transition: all 0.2s;
 
+    @include respond(tab-port) {
+      float: left;
+      position: relative;
+      width: 33.33333333%;
+      box-shadow: $shadow-light;
+    }
+
     &--p1 {
       left: 0;
       top: -2rem;
+
+      @include respond(tab-port) {
+        top: 0;
+        transform: scale(1.2);
+      }
     }
     &--p2 {
       right: 0;
       top: 2rem;
+
+      @include respond(tab-port) {
+        top: -1rem;
+        left: 0;
+        transform: scale(1.3);
+        z-index: 15;
+      }
     }
     &--p3 {
       left: 20%;
       top: 10rem;
+
+      @include respond(tab-port) {
+        top: 1rem;
+        left: 0;
+        transform: scale(1.1);
+      }
     }
 
     &:hover {

src/sass/components/_feature-box.scss

@@ -7,6 +7,10 @@
   box-shadow: $shadow-default;
   transition: transform 0.3s;
 
+  @include respond(tab-port) {
+    padding: 2rem;
+  }
+
   &__icon {
     font-size: 6rem;
     margin-bottom: 0.5rem;
@@ -18,6 +22,10 @@
     );
     background-clip: text;
     color: transparent;
+
+    @include respond(tab-port) {
+      margin-bottom: 0;
+    }
   }
 
   &:hover {

src/sass/layout/_footer.scss

@@ -3,9 +3,17 @@
   padding: 10rem 0;
   font-size: $normal-font-size;
 
+  @include respond(tab-port) {
+    padding: 8rem 0;
+  }
+
   &__logo-box {
     text-align: center;
     margin-bottom: 8rem;
+
+    @include respond(tab-port) {
+      margin-bottom: 6rem;
+    }
   }
 
   &__logo {
@@ -17,6 +25,11 @@
     border-top: 1px solid $color-grey-dark;
     padding-top: 2rem;
     display: inline-block;
+
+    @include respond(tab-port) {
+      width: 100%;
+      text-align: center;
+    }
   }
 
   &__list {
@@ -56,5 +69,10 @@
     float: right;
     color: $color-grey-dark;
     color: $color-grey-light-1;
+
+    @include respond(tab-port) {
+      width: 100%;
+      float: none;
+    }
   }
 }

src/sass/layout/_grid.scss

@@ -4,6 +4,15 @@
 
   &:not(:last-child) {
     margin-bottom: $gutter-vertical;
+
+    @include respond(tab-port) {
+      margin-bottom: $gutter-horizontal;
+    }
+  }
+
+  @include respond(tab-port) {
+    max-width: 50rem;
+    padding: 0 3rem;
   }
 
   @include clearfix;
@@ -13,6 +22,15 @@
 
     &:not(:last-child) {
       margin-right: $gutter-horizontal;
+
+      @include respond(tab-port) {
+        margin-right: 0;
+        margin-bottom: $gutter-horizontal;
+      }
+    }
+
+    @include respond(tab-port) {
+      width: 100% !important;
     }
   }
 

src/sass/layout/_header.scss

@@ -11,6 +11,10 @@
   clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
   position: relative;
 
+  @include respond(phone) {
+    clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
+  }
+
   &__logo-box {
     position: absolute;
     top: 4rem;

src/sass/layout/_navigation.scss

@@ -25,6 +25,15 @@
     &--times {
       opacity: 0;
     }
+
+    @include respond(tab-port) {
+      top: 4rem;
+      right: 4rem;
+    }
+    @include respond(phone) {
+      top: 3rem;
+      right: 3rem;
+    }
   }
 
   &__background {
@@ -40,6 +49,16 @@
     );
     z-index: 1000;
     transition: all 0.8s cubic-bezier(0.85, 0, 0.15, 1);
+
+    @include respond(tab-port) {
+      top: 4.5rem;
+      right: 4rem;
+    }
+
+    @include respond(phone) {
+      top: 3.5rem;
+      right: 3rem;
+    }
   }
 
   &__nav {
@@ -50,6 +69,7 @@
     left: 0;
     z-index: 1500;
 
+    visibility: hidden;
     opacity: 0;
     width: 0;
     transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
@@ -104,6 +124,7 @@
   }
 
   &__checkbox:checked ~ &__nav {
+    visibility: visible;
     opacity: 1;
     width: 100%;
   }

src/sass/pages/_home.scss

@@ -2,6 +2,10 @@
   background-color: $color-grey-light-1;
   padding: 25rem 0;
   margin-top: -20vh;
+
+  @include respond(tab-port) {
+    padding: 20rem 0;
+  }
 }
 
 .section-features {
@@ -20,17 +24,29 @@
   & > * {
     transform: skewY(7deg);
   }
+
+  @include respond(tab-port) {
+    padding: 10rem 0;
+  }
 }
 
 .section-tours {
   background-color: $color-grey-light-1;
   padding: 25rem 0 15rem 0;
   margin-top: -12rem;
+
+  @include respond(tab-port) {
+    padding: 20rem 0 10rem 0;
+  }
 }
 
 .section-stories {
   padding: 15rem 0;
   position: relative;
+
+  @include respond(tab-port) {
+    padding: 10rem 0;
+  }
 }
 
 .section-book {
@@ -40,6 +56,10 @@
     $color-primary-light,
     $color-primary-dark
   );
+
+  @include respond(tab-port) {
+    padding: 10rem 0;
+  }
 }
 
 .book {