diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss
index 2dd51fa..97cba3f 100644
--- a/resources/assets/sass/_var.scss
+++ b/resources/assets/sass/_var.scss
@@ -31,9 +31,10 @@ $c-error: #fa2036; // error
 $nav-link-count: 3;
 
 // Sizes
-$nav-height-desktop: 60px;
-$nav-height-mobile: 50px;
-$nav-link-height-mobile: 50px;
+$nav-height-desktop: px2rem(60px);
+$nav-height-mobile: px2rem(50px);
+$nav-link-height-mobile: px2rem(50px);
+$grid-gutter-width: px2rem(30px);
 
 // Breakpoints
 $nav-desktop-min: 768px;
diff --git a/resources/assets/sass/pages/_blog.scss b/resources/assets/sass/pages/_blog.scss
index ab7169c..e7cb653 100644
--- a/resources/assets/sass/pages/_blog.scss
+++ b/resources/assets/sass/pages/_blog.scss
@@ -7,7 +7,7 @@
 
     .blog-entry {
         border: 1px solid lighten($c-base, 75%);
-        border-radius: 5px;
+        border-radius: px2rem(5px);
 
         @include media-breakpoint-up(md) {
             display: flex;
@@ -36,7 +36,7 @@
         }
 
         &-content {
-            padding: 25px;
+            padding: px2rem(25px);
 
             @include media-breakpoint-up(md) {
                 display: flex;
@@ -68,10 +68,10 @@
                 width: 100%;
 
                 &-item {
-                    margin-right: 5px;
+                    margin-right: px2rem(5px);
                     display: inline-block;
-                    padding: 3px 8px;
-                    border-radius: 3px;
+                    padding: px2rem(3px) px2rem(8px);
+                    border-radius: px2rem(3px);
                     background-color: $c-accent;
                     color: $c-text-light;
                 }
diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss
index 81b7af8..d52c76e 100644
--- a/resources/assets/sass/pages/_contact.scss
+++ b/resources/assets/sass/pages/_contact.scss
@@ -1,12 +1,12 @@
 .contact-page-component {
     $trans-speed: 100ms;
-    padding-top: 35px;
+    padding-top: px2rem(35px);
     padding-bottom: 0px;
 
     input, textarea {
-        margin-bottom: 20px;
+        margin-bottom: px2rem(20px);
         width: 100%;
-        padding: 5px 10px;
+        padding: px2rem(5px) px2rem(10px);
         border: 2px solid fade-out($c-base, 0.75);
         background-color: rgba(255, 255, 255, 0.8);
         font-size: px2rem(14px);
@@ -23,7 +23,7 @@
 
     textarea {
         resize: none;
-        height: 150px;
+        height: px2rem(150px);
     }
 
     .submit {
@@ -44,8 +44,8 @@
     }
 
     .notification {
-        margin: 0px auto 15px auto;
-        padding: 5px 10px;
+        margin: 0px auto px2rem(15px) auto;
+        padding: px2rem(5px) px2rem(10px);
         background-color: lighten($c-error, 15%);
         color: $c-text-light;
         font-size: px2rem(14px);
diff --git a/resources/assets/sass/sections/_footer.scss b/resources/assets/sass/sections/_footer.scss
index 21e9d34..ff0f810 100644
--- a/resources/assets/sass/sections/_footer.scss
+++ b/resources/assets/sass/sections/_footer.scss
@@ -1,8 +1,8 @@
 .footer-section-component {
     width: 100%;
-    height: 32px;
-    padding: 0px 10px;
+    height: px2rem(32px);
+    padding: 0px px2rem(10px);
     background-color: $c-base;
     color: $c-text-light;
-    line-height: 32px;
+    line-height: px2rem(32px);
 }
diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss
index 5d1d172..6780b1d 100644
--- a/resources/assets/sass/sections/_nav.scss
+++ b/resources/assets/sass/sections/_nav.scss
@@ -1,7 +1,7 @@
 .nav-section-component {
-    $logo-offset: 10px;
-    $desktop-logo-width: 35px;
-    $mobile-logo-width: 30px;
+    $logo-offset: px2rem(10px);
+    $desktop-logo-width: px2rem(35px);
+    $mobile-logo-width: px2rem(30px);
     @include font-sans-semibold;
     position: absolute;
     top: 0px;
@@ -25,8 +25,8 @@
             right: ($grid-gutter-width / 2);
             transform: translateY(-50%);
             margin: 0px;
-            width: 22px;
-            height: 14px;
+            width: px2rem(22px);
+            height: px2rem(14px);
             padding: 0px;
             border: 0;
             border-radius: 0;
@@ -126,7 +126,7 @@
                 @media (max-width: $nav-mobile-max) {
                     display: block;
                     height: $nav-link-height-mobile;
-                    padding: 0px 10px;
+                    padding: 0px px2rem(10px);
                     background-color: $c-base;
                     line-height: $nav-link-height-mobile;
                     transition: background-color 150ms;
@@ -137,7 +137,7 @@
                 }
 
                 @media (min-width: $nav-desktop-min) {
-                    padding: 5px 20px;
+                    padding: px2rem(5px) px2rem(20px);
                     transition: color 150ms;
 
                     &:first-child {
@@ -159,7 +159,7 @@
 
                 span {
                     position: relative;
-                    padding: 3px 0px;
+                    padding: px2rem(3px) 0px;
 
                     &:after {
                         content: "";
diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss
index 15b57ad..c19357e 100644
--- a/resources/assets/sass/sections/_subscription-form.scss
+++ b/resources/assets/sass/sections/_subscription-form.scss
@@ -1,14 +1,14 @@
 .subscription-form-section-component {
     $trans-speed: 100ms;
-    width: 200px;
+    width: px2rem(200px);
     border: 2px solid fade-out($c-base, 0.75);
-    border-radius: 3px;
+    border-radius: px2rem(3px);
     background-color: lighten($c-base, 75%);
 
     input {
-        margin: 5px;
-        width: calc(100% - 10px);
-        padding: 3px;
+        margin: px2rem(5px);
+        width: calc(100% - #{px2rem(10px)});
+        padding: px2rem(3px);
         border: 2px solid fade-out($c-base, 0.75);
         font-size: px2rem(14px);
         text-align: center;