first responsive adjustments done

Natours/starter/sass/layout/_footer.scss

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

Natours/starter/sass/layout/_grid.scss

@@ -4,6 +4,15 @@
 
     &:not(:last-child) {
         margin-bottom: $gutter-vertical;
+
+        @include respond(tab-port) {
+          margin-bottom: $gutter-vertical-small;
+        }
+    }
+
+    @include respond(tab-port) {
+      max-width: 50rem;
+      padding: 0 3rem;
     }
 
     @include clearfix;
@@ -13,7 +22,15 @@
         float: left;
 
         &:not(:last-child) {
-            margin-right: $gutter-horizontal;
+          margin-right: $gutter-horizontal;
+          @include respond(tab-port) {
+            margin-right: 0;
+            margin-bottom: $gutter-vertical-small;
+          }
+        }
+
+        @include respond(tab-port) {
+          width: 100% !important;
         }
     }
 
@@ -40,4 +57,4 @@
     .col-3-of-4 {
         width: calc(3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal});
     }
-}
+}

Natours/starter/sass/layout/_header.scss

@@ -5,6 +5,10 @@
     background-position: top;
     clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
 
+    @include respond(phone) {
+      clip-path: polygon(0% 0%, 100% 0%, 100% 85vh, 0% 100%);
+    }
+
     position: relative;
 
     &__logo-box {

Natours/starter/sass/layout/_navigation.scss

@@ -14,6 +14,16 @@
     z-index: 2000;
     box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
 
+    @include respond(tab-port) {
+      top: 4rem;
+      right: 4rem;
+    }
+
+    @include respond(phone) {
+      top: 2.5rem;
+      right: 2.5rem;
+    }
+
     text-align: center;
 
     cursor: pointer;
@@ -33,7 +43,15 @@
     z-index: 1000;
     transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
 
-    // transform: scale(80);
+    @include respond(tab-port) {
+      top: 4.5rem;
+      right: 4.5rem;
+    }
+
+    @include respond(phone) {
+      top: 3rem;
+      right: 3rem;
+    }
   }
 
   &__nav {