first responsive adjustments done

Natours/starter/sass/abstracts/_mixins.scss

@@ -12,3 +12,46 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+// MEDIA QUERY MANAGER
+/*
+ * 0 - 600px : Phone
+ * 600 - 900px : Tablet portrait
+ * 900 - 1200px : Tablet landscape
+ * 1200 - 1800px : Normal desktop
+ * 1800px + : Big desktop
+
+ * $breakpoint argument choices
+   - phone
+   - tab-port
+   - tab-land
+   - big-desktop
+
+   1em = 16px
+ */
+@mixin respond($breakpoint) {
+  @if $breakpoint == phone {
+    @media (max-width: 37.5em) {
+      //600px
+      @content;
+    }
+  }
+  @if $breakpoint == tab-port {
+    @media (max-width: 56.25em) {
+      //900px
+      @content;
+    }
+  }
+  @if $breakpoint == tab-land {
+    @media (max-width: 75em) {
+      //1200px
+      @content;
+    }
+  }
+  @if $breakpoint == big-desktop {
+    @media (min-width: 112.5em) {
+      //1800px
+      @content;
+    }
+  }
+}

Natours/starter/sass/abstracts/_variables.scss

@@ -22,6 +22,7 @@ $color-black: #000;
 //Grid Spacing
 $grid-width: 114rem;
 $gutter-vertical: 8rem;
+$gutter-vertical-small: 6rem;
 $gutter-horizontal: 6rem;
 
 //Font sizing