created breakpoints

src/sass/abstracts/_mixins.scss

@@ -12,3 +12,43 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+// MEDIA QUERIES
+
+/*
+$breakpoint arguments:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+*/
+
+@mixin respond($breakpoint) {
+  // 600px
+  @if $breakpoint == phone {
+    @media (max-width: 37.5em) {
+      @content;
+    }
+  }
+
+  // 900px
+  @if $breakpoint == tab-port {
+    @media (max-width: 56.25em) {
+      @content;
+    }
+  }
+
+  // 1200px
+  @if $breakpoint == tab-land {
+    @media (max-width: 75em) {
+      @content;
+    }
+  }
+
+  // 1800px
+  @if $breakpoint == big-desktop {
+    @media (min-width: 112.5em) {
+      @content;
+    }
+  }
+}

src/sass/base/_base.scss

@@ -7,7 +7,19 @@
 }
 
 html {
-  font-size: 62.5%;
+  font-size: 62.5%; // 1 rem = 10px; 10px/16px = 62.5% (16 is default browser font size)
+
+  @include respond(tab-land) {
+    font-size: 56.25%; // 1 rem = 9px; 9/16 = 50%
+  }
+
+  @include respond(tab-port) {
+    font-size: 50%; // 1 rem = 8px; 8/16 = 50%
+  }
+
+  @include respond(big-desktop) {
+    font-size: 75%; // 1 rem = 12px; 12/16 = 75%
+  }
 }
 
 body {