diff --git a/styles/_colors.scss b/styles/_colors.scss
deleted file mode 100644
index 4838f31..0000000
--- a/styles/_colors.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-$black: #000;
-$white: #fff;
-$grey: #f8f8f8;
-$jambonz: #da1c5c;
-$pink: #fff3f6;
-$charcoal: #231f20;
-$purple: #9662b2;
-$teal: #30beb0;
-$blue: #006dff;
\ No newline at end of file
diff --git a/styles/_typography.scss b/styles/_typography.scss
index 0e42d91..a54ce4b 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -31,7 +31,7 @@ em {
 }
 
 .h1 {
-  font-size: 48px;
+  font-size: $h1-size;
   line-height: 1.33;
   letter-spacing: -0.06px;
   font-family: 'objectivitybold';
@@ -39,10 +39,22 @@ em {
   em {
     font-family: 'objectivitybold_italic';
   }
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h2-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h3-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h4-size;
+  }
 }
 
 .h2 {
-  font-size: 40px;
+  font-size: $h2-size;
   line-height: 1.35;
   letter-spacing: -0.05px;
   font-family: 'objectivitybold';
@@ -50,10 +62,22 @@ em {
   em {
     font-family: 'objectivitybold_italic';
   }
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h3-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h4-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h5-size;
+  }
 }
 
 .h3 {
-  font-size: 36px;
+  font-size: $h3-size;
   line-height: 1.33;
   letter-spacing: -0.05px;
   font-family: 'objectivitybold';
@@ -61,42 +85,106 @@ em {
   em {
     font-family: 'objectivitybold_italic';
   }
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h4-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h5-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h6-size;
+  }
 }
 
 .h4 {
-  font-size: 32px;
-  line-height: 1.56;
+  font-size: $h4-size;
+  line-height: 1.5;
   letter-spacing: -0.04px;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h5-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h6-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $p-size;
+  }
 }
 
 .h5 {
-  font-size: 24px;
+  font-size: $h5-size;
   line-height: 1.67;
   letter-spacing: -0.03px;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h6-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $p-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $m-size;
+  }
 }
 
 .h6 {
-  font-size: 20px;
+  font-size: $h6-size;
   line-height: 1.8;
   letter-spacing: -0.03px;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $p-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $m-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $ms-size;
+  }
 }
 
 .p {
-  font-size: 18px;
+  font-size: $p-size;
   line-height: 1.9;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $m-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $ms-size;
+  }
 }
 
 .m {
-  font-size: 16px;
+  font-size: $m-size;
   line-height: 1.9;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $ms-size;
+  }
 }
 
 .ms {
-  font-size: 14px;
+  font-size: $ms-size;
   line-height: 2;
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $mxs-size;
+  }
 }
 
 .mxs {
-  font-size: 12px;
+  font-size: $mxs-size;
   line-height: 2;
 }
\ No newline at end of file
diff --git a/styles/_vars.scss b/styles/_vars.scss
new file mode 100644
index 0000000..a91ed11
--- /dev/null
+++ b/styles/_vars.scss
@@ -0,0 +1,34 @@
+/******************************************************************************
+ * Colors
+*******************************************************************************/
+$black: #000;
+$white: #fff;
+$grey: #f8f8f8;
+$jambonz: #da1c5c;
+$pink: #fff3f6;
+$charcoal: #231f20;
+$purple: #9662b2;
+$teal: #30beb0;
+$blue: #006dff;
+
+/******************************************************************************
+ * Font sizes
+*******************************************************************************/
+$h1-size: 48px;
+$h2-size: 40px;
+$h3-size: 36px;
+$h4-size: 32px;
+$h5-size: 24px;
+$h6-size: 20px;
+$p-size: 18px;
+$m-size: 16px;
+$ms-size: 14px;
+$mxs-size: 12px;
+
+/******************************************************************************
+ * Sizes
+*******************************************************************************/
+$width-max: 1440px;
+$width-tablet-1: 1024px;
+$width-tablet-2: 768px;
+$width-mobile: 640px;
\ No newline at end of file
diff --git a/styles/global.scss b/styles/global.scss
index a041fba..3d2d798 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,7 +1,7 @@
 /******************************************************************************
- * Colors
+ * Variables
 *******************************************************************************/
-@import 'colors.scss';
+@import 'vars.scss';
 
 /******************************************************************************
  * Fonts