first responsive adjustments done

Natours/starter/sass/base/_base.scss

@@ -1,16 +1,35 @@
 *,
 ::after,
 ::before {
-    margin: 0;
-    padding: 0;
-    box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
 }
 
 html {
-    font-size: 62.5%;
+  font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%
+
+  @include respond(big-desktop) {
+    font-size: 75%;
+  }
+  @include respond(tab-land) {
+    font-size: 56.25%;
+  }
+  @include respond(tab-port) {
+    font-size: 50%; //1rem = 8px
+  }
+  // not needes as it would be the same as tab-port
+  // @include respond(phone) {
+  //   font-size: 50%;
+  // }
 }
 
 body {
-    padding: 3rem;
-    box-sizing: border-box;
-}
+  padding: 3rem;
+  box-sizing: border-box;
+
+  @include respond(tab-port) {
+    padding: 0;
+
+  }
+}

Natours/starter/sass/base/_typography.scss

@@ -1,70 +1,91 @@
 body {
-    font-family: "Lato",Verdana, Geneva, Tahoma, sans-serif;
-    font-weight: 400;
-    /* font-size: 16px; */
-    line-height: 1.7;
-    color: $color-gray-dark;
+  font-family: "Lato", Verdana, Geneva, Tahoma, sans-serif;
+  font-weight: 400;
+  /* font-size: 16px; */
+  line-height: 1.7;
+  color: $color-gray-dark;
 }
 
 .heading--primary {
-    color: $color-white;
-    text-transform: uppercase;
-    margin-bottom: 6rem;
+  color: $color-white;
+  text-transform: uppercase;
+  margin-bottom: 6rem;
 
-    &-main {
-        display: block;
-        font-size: 6rem;
-        font-weight: 400;
-        letter-spacing: 3.5rem;
-        
-        animation-name: slideLeft;
-        animation-duration: 1s;
-        animation-timing-function: ease-in;
-    }
+  &-main {
+    display: block;
+    font-size: 6rem;
+    font-weight: 400;
+    letter-spacing: 3.5rem;
 
-    &-sub {
-        display: block;
-        font-size: 2rem;
-        font-weight: 700;
-        letter-spacing: 1.75rem;
-        
-        animation-name: slideRight;
-        animation-duration: 1s;
-        animation-timing-function: ease-in;
+    animation-name: slideLeft;
+    animation-duration: 1s;
+    animation-timing-function: ease-in;
+
+    @include respond(phone) {
+      letter-spacing: 1rem;
+      font-size: 5rem;
     }
+  }
+
+  &-sub {
+    display: block;
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: 1.75rem;
+
+    animation-name: slideRight;
+    animation-duration: 1s;
+    animation-timing-function: ease-in;
+
+    @include respond(phone) {
+      letter-spacing: .5rem;
+    }
+  }
 }
 
 .heading--secondary {
-    font-size: 3.5rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 2px;
+  font-size: 3.5rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
 
-    display: inline-block;
+  display: inline-block;
 
-    background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
-    
-    background-clip: floor($number: 0);
-    -webkit-background-clip: text;
-    color: transparent;
+  background-image: linear-gradient(
+    to right,
+    $color-primary-light,
+    $color-primary-dark
+  );
 
-    transition: all .2s;
+  background-clip: floor($number: 0);
+  -webkit-background-clip: text;
+  color: transparent;
 
-    &:hover {
-        transform: skewY(2deg) skewX(15deg) scale(1.1);
-        text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
-    }
+  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: 0.5rem 1rem 2rem rgba($color-black, 0.2);
+  }
 }
 
 .heading--terciary {
-    font-size: $default-font-size;
-    font-weight: 700;
-    text-transform: capitalize;
+  font-size: $default-font-size;
+  font-weight: 700;
+  text-transform: capitalize;
 }
 
 .paragraph {
-    font-size: $default-font-size;
-    &:not(:last-child) {
-        margin-bottom: 3rem;
-    }
-}
+  font-size: $default-font-size;
+  &:not(:last-child) {
+    margin-bottom: 3rem;
+  }
+}