From 935b7b3d0e49488246519b5aa9d9e7f9c0c1a3b1 Mon Sep 17 00:00:00 2001
From: Jay V <air@live.ca>
Date: Wed, 18 Oct 2023 13:09:27 -0400
Subject: [PATCH] Updating jekyll and removing scss divide warnings

---
 Gemfile                  |   2 +-
 Gemfile.lock             |  57 +++++++++++---------
 _sass/about.scss         |  34 ++++++------
 _sass/blog.scss          |   8 +--
 _sass/careers.scss       |   6 +--
 _sass/download.scss      |  20 +++----
 _sass/example.scss       |  20 +++----
 _sass/guide.scss         |  42 +++++++--------
 _sass/lander.scss        | 114 +++++++++++++++++++--------------------
 _sass/theme/_base.scss   |  16 +++---
 _sass/theme/_layout.scss |  56 +++++++++----------
 assets/main.scss         |  16 +++---
 12 files changed, 198 insertions(+), 193 deletions(-)

diff --git a/Gemfile b/Gemfile
index 7bf664ce8..ce7430452 100644
--- a/Gemfile
+++ b/Gemfile
@@ -9,7 +9,7 @@ ruby RUBY_VERSION
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "4.1.1"
+gem "jekyll", "4.3.2"
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 gem "minima", "~> 2.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index caf647bd6..0b1ccbbc6 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,40 +1,43 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.1)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.10)
+    concurrent-ruby (1.2.2)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.5)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
+    google-protobuf (3.24.4-arm64-darwin)
+    google-protobuf (3.24.4-x86_64-darwin)
     http_parser.rb (0.8.0)
-    i18n (1.12.0)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    jekyll (4.1.1)
+    jekyll (4.3.2)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
+      kramdown (~> 2.3, >= 2.3.1)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.4.0)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (~> 3.0)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
     jekyll-feed (0.16.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-redirect-from (0.16.0)
       jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.2.0)
-      sassc (> 2.0.1, < 3.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
@@ -45,8 +48,8 @@ GEM
       rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.7.1)
+    liquid (4.0.4)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
@@ -56,18 +59,20 @@ GEM
       jekyll-seo-tag (~> 2.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.0)
-    rb-fsevent (0.11.1)
+    public_suffix (5.0.3)
+    rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (3.30.0)
+    rexml (3.2.6)
+    rouge (4.1.3)
     safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.8.0)
+    sass-embedded (1.69.4-arm64-darwin)
+      google-protobuf (~> 3.23)
+    sass-embedded (1.69.4-x86_64-darwin)
+      google-protobuf (~> 3.23)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.5.0)
     webrick (1.7.0)
 
 PLATFORMS
@@ -75,14 +80,14 @@ PLATFORMS
   x86_64-darwin-22
 
 DEPENDENCIES
-  jekyll (= 4.1.1)
+  jekyll (= 4.3.2)
   jekyll-redirect-from
   jekyll-sitemap
   minima (~> 2.0)
   webrick (~> 1.7)
 
 RUBY VERSION
-   ruby 2.6.10p210
+   ruby 3.0.4p208
 
 BUNDLED WITH
-   2.4.5
+   2.3.20
diff --git a/_sass/about.scss b/_sass/about.scss
index 9c905cc25..7a132f33c 100644
--- a/_sass/about.scss
+++ b/_sass/about.scss
@@ -4,7 +4,7 @@
 .home > .about-page {
 
   @include media-query($on-palm) {
-    padding: 0 $spacing-unit / 2;
+    padding: 0 calc($spacing-unit / 2);
   }
 
   .header {
@@ -100,7 +100,7 @@
   }
 
   .products {
-    margin: 0 -1 * $spacing-unit / 2;
+    margin: 0 calc(-1 * $spacing-unit / 2);
 
     display: flex;
     align-items: stretch;
@@ -109,24 +109,24 @@
     @include media-query($on-palm) {
       margin-top: $spacing-unit - 5px;
       display: block;
-      padding: 0 $spacing-unit / 2;
+      padding: 0 calc($spacing-unit / 2);
     }
 
     .product {
       flex: 1 1 auto;
-      margin: 0 $spacing-unit / 2;
+      margin: 0 calc($spacing-unit / 2);
       border-radius: 16px;
       padding: $spacing-unit 2 * $spacing-unit - 10px 2 * $spacing-unit - 5px;
       border: 1px dashed $important-color;
       box-sizing: border-box;
 
       @include media-query($on-monitor) {
-        padding: $spacing-unit / 2;
+        padding: calc($spacing-unit / 2);
       }
 
       @include media-query($on-palm) {
-        margin-bottom: $spacing-unit / 2;
-        padding: $spacing-unit / 2;
+        margin-bottom: calc($spacing-unit / 2);
+        padding: calc($spacing-unit / 2);
 
         &:last-child {
           margin-bottom: 0;
@@ -144,10 +144,10 @@
           style: dashed;
           color: $important-color;
         }
-        margin: $spacing-unit / 2 + 4px 0 $spacing-unit / 2;
+        margin: calc($spacing-unit / 2 + 4px) 0 calc($spacing-unit / 2);
 
         @include media-query($on-palm) {
-          margin: $spacing-unit / 2 0 $spacing-unit / 2 - 3px;
+          margin: calc($spacing-unit / 2) 0 calc($spacing-unit / 2 - 3px);
         }
       }
 
@@ -186,7 +186,7 @@
 
     @include media-query($on-palm) {
       margin-top: 2.5 * $spacing-unit;
-      padding: 2 * $spacing-unit + 10px $spacing-unit / 2 3 * $spacing-unit;
+      padding: 2 * $spacing-unit + 10px calc($spacing-unit / 2) 3 * $spacing-unit;
       border: none;
       box-shadow: 6px 9px 25px rgba(57, 92, 107, 0.3),
                   0px 4px 12px rgba(57, 92, 107, 0.4);
@@ -266,7 +266,7 @@
       }
 
       h5 {
-        margin-top: $spacing-unit / 2;
+        margin-top: calc($spacing-unit / 2);
         margin-bottom: 2px;
         font-family: $base-font-family;
         font-size: 20px;
@@ -288,7 +288,7 @@
         }
       }
       .links {
-        margin-top: $spacing-unit / 2 - 5px;
+        margin-top: calc($spacing-unit / 2 - 5px);
 
         @include media-query($on-palm) {
           margin-top: $spacing-unit - 10px;
@@ -300,7 +300,7 @@
           margin-right: $spacing-unit - 10px;
 
           @include media-query($on-palm) {
-            margin-right: $spacing-unit / 2;
+            margin-right: calc($spacing-unit / 2);
           }
         }
       }
@@ -401,14 +401,14 @@
           padding: $spacing-unit;
         }
         @include media-query($on-monitor) {
-          padding: $spacing-unit / 2;
+          padding: calc($spacing-unit / 2);
         }
       }
       a:nth-child(3) {
         padding-left: 2 * $spacing-unit;
 
         @include media-query($on-monitor) { padding: $spacing-unit; }
-        @include media-query($on-monitor) { padding: $spacing-unit / 2; }
+        @include media-query($on-monitor) { padding: calc($spacing-unit / 2); }
       }
     }
 
@@ -421,7 +421,7 @@
                   0px 4px 12px rgba(57, 92, 107, 0.4);
 
       @include media-query($on-palm) {
-        padding: 0 $spacing-unit / 2 $spacing-unit;
+        padding: 0 calc($spacing-unit / 2) $spacing-unit;
       }
     }
 
@@ -438,7 +438,7 @@
         flex: 0 0 300px - 1.5 * $spacing-unit;
         margin: 0 $spacing-unit - 8px;
         padding-top: $spacing-unit;
-        padding-bottom: $spacing-unit / 2;
+        padding-bottom: calc($spacing-unit / 2);
         text-align: left;
         border-bottom: 1px dashed $important-color;
 
diff --git a/_sass/blog.scss b/_sass/blog.scss
index 1521a86aa..9a3b6e130 100644
--- a/_sass/blog.scss
+++ b/_sass/blog.scss
@@ -58,8 +58,8 @@
   position: absolute;
   bottom: 0;
   left: 50%;
-  margin-left: - $size / 2;
-  margin-bottom: - $size / 2;
+  margin-left: - $size * 0.5;
+  margin-bottom: - $size * 0.5;
   border-radius: 100%;
   //filter: grayscale(100%);
 }
@@ -85,7 +85,7 @@ $img-margin: 15px;
     //filter: grayscale(100%);
   }
   li .post-info {
-    margin-top: $spacing-unit / 2;
+    margin-top: $spacing-unit * 0.5;
     font-size: 15px;
   }
   li .post-info .category {
@@ -105,7 +105,7 @@ $img-margin: 15px;
 }
 
 .blog .post-content .twitter-share {
-  margin-top: $spacing-unit / 2 + 5px;
+  margin-top: $spacing-unit * 0.5 + 5px;
   line-height: 2;
   span {
     margin-right: 4px;
diff --git a/_sass/careers.scss b/_sass/careers.scss
index 10d0addf5..a074c3355 100644
--- a/_sass/careers.scss
+++ b/_sass/careers.scss
@@ -4,13 +4,13 @@
 main > .careers-page {
 
   @include media-query($on-palm) {
-    padding: 0 $spacing-unit / 2;
+    padding: 0 $spacing-unit * 0.5;
   }
 
   .header {
 
     h1 {
-      margin: 0 auto $spacing-unit / 2;
+      margin: 0 auto $spacing-unit * 0.5;
       max-width: 570px;
       padding-top: $spacing-unit;
       font-size: 40px;
@@ -35,7 +35,7 @@ main > .careers-page {
 
     @include media-query($on-palm) {
       h1 {
-        padding-top: $spacing-unit / 2;
+        padding-top: $spacing-unit * 0.5;
         font-size: 34px;
       }
     }
diff --git a/_sass/download.scss b/_sass/download.scss
index eb897aabe..5d4f05e0c 100644
--- a/_sass/download.scss
+++ b/_sass/download.scss
@@ -3,7 +3,7 @@
 ////////////////
 main > .download-ebook-page {
   margin: 0 auto;
-  padding: 0 $spacing-unit $spacing-unit / 2;
+  padding: 0 $spacing-unit $spacing-unit * 0.5;
   max-width: calc(#{$post-content-width} - (#{$spacing-unit} * 2));
 
   & > .title {
@@ -37,7 +37,7 @@ main > .download-ebook-page {
       position: relative;
 
       @include media-query($on-palm) {
-        margin: $spacing-unit / 2 auto;
+        margin: $spacing-unit * 0.5 auto;
       }
 
       .scroll-content {
@@ -116,13 +116,13 @@ main > .download-ebook-page {
 
     .features {
       flex: 1 1 50%;
-      padding: $spacing-unit / 2 + 5px;
+      padding: $spacing-unit * 0.5 + 5px;
       border-radius: 8px;
       background-color: white;
       border: 1px solid $important-color;
 
       & > p {
-        margin-bottom: $spacing-unit / 2;
+        margin-bottom: $spacing-unit * 0.5;
         color: $secondary-text-color;
       }
 
@@ -184,7 +184,7 @@ main > .download-ebook-page {
           &:nth-child(2) {
             position: absolute;
             left: 50%;
-            margin-left: -1 * $width / 2;
+            margin-left: -1 * $width * 0.5;
           }
 
           @include media-query($on-laptop) {
@@ -221,7 +221,7 @@ main > .download-ebook-page {
         background-color: $brand-color;
         color: white;
         border-radius: 8px;
-        padding: $spacing-unit / 2 $spacing-unit / 2 + 5px $spacing-unit / 2 + 5px;
+        padding: $spacing-unit * 0.5 $spacing-unit * 0.5 + 5px $spacing-unit * 0.5 + 5px;
 
         h3 {
           margin-bottom: 0;
@@ -229,7 +229,7 @@ main > .download-ebook-page {
           font-family: $base-font-family;
         }
         p.copy {
-          margin-bottom: $spacing-unit / 2 + 5px;
+          margin-bottom: $spacing-unit * 0.5 + 5px;
           color: #C3CED2;
           font-size: 14px;
           line-height: 1.375;
@@ -246,7 +246,7 @@ main > .download-ebook-page {
           }
           .main-form {
             flex-grow: 1;
-            gap: $spacing-unit / 2;
+            gap: $spacing-unit * 0.5;
           }
           input[type="email"] {
             padding: 10px;
@@ -289,10 +289,10 @@ main > .download-ebook-page {
 
         .email-octopus-form-row-subscribe {
           margin-top: 0;
-          margin-left: $spacing-unit / 2 + 5px;
+          margin-left: $spacing-unit * 0.5 + 5px;
 
           @include media-query($on-palm) {
-            margin-top: $spacing-unit / 2;
+            margin-top: $spacing-unit * 0.5;
             margin-left: 0;
           }
         }
diff --git a/_sass/example.scss b/_sass/example.scss
index ae2b17c5a..a3db894c1 100644
--- a/_sass/example.scss
+++ b/_sass/example.scss
@@ -1,6 +1,6 @@
 article.post.example .post-header .post-repo {
-  margin-top: $spacing-unit / 2;
-  padding-top: $spacing-unit / 2;
+  margin-top: $spacing-unit * 0.5;
+  padding-top: $spacing-unit * 0.5;
   border-top: 1px solid $grey-color-light;
   font-size: 18px;
   color: $secondary-text-color;
@@ -32,7 +32,7 @@ article.post.example section.examples-list {
   }
 
   .toc-section {
-    $margin: round($spacing-unit / 4);
+    $margin: round($spacing-unit * 0.5);
 
     & > h3 {
       font-size: 32px;
@@ -63,7 +63,7 @@ article.post.example section.examples-list {
       justify-content: space-between;
 
       & > .content {
-        padding: $spacing-unit / 2;
+        padding: $spacing-unit * 0.5;
       }
 
       h4 {
@@ -85,7 +85,7 @@ article.post.example section.examples-list {
       }
 
       .controls {
-        padding: $spacing-unit / 2;
+        padding: $spacing-unit * 0.5;
         background: darken($secondary-background-color, 2%);
 
         a {
@@ -120,7 +120,7 @@ article.post.example section.examples-list {
 
     & > .toc-section {
       &:not(:first-child) {
-        margin-top: $spacing-unit / 2;
+        margin-top: $spacing-unit * 0.5;
       }
       & > h3 {
         font-size: 20px;
@@ -157,8 +157,8 @@ article.post.example section.examples-list {
       position: absolute;
       top: 50%;
       left: 50%;
-      margin-top: -1 * $icon-size / 2;
-      margin-left: -1 * $icon-size / 2;
+      margin-top: -1 * $icon-size * 0.5;
+      margin-left: -1 * $icon-size * 0.5;
       width: $icon-size;
       height: $icon-size;
     }
@@ -187,7 +187,7 @@ aside.sidebar.example {
   }
 
   & > .about {
-    padding: $spacing-unit / 2;
+    padding: $spacing-unit * 0.5;
     background-color: $secondary-background-color;
     border-radius: 5px;
 
@@ -205,7 +205,7 @@ aside.sidebar.example {
       line-height: 1.4;
     }
     p.description {
-      margin-bottom: $spacing-unit / 2;
+      margin-bottom: $spacing-unit * 0.5;
       line-height: 1.4;
       font-size: 14px;
       color: $secondary-text-color;
diff --git a/_sass/guide.scss b/_sass/guide.scss
index 499d94d7b..4395e21aa 100644
--- a/_sass/guide.scss
+++ b/_sass/guide.scss
@@ -3,7 +3,7 @@
 ////////////////
 main > .guide-page {
   margin: 0 auto;
-  padding: 0 $spacing-unit $spacing-unit / 2;
+  padding: 0 $spacing-unit calc($spacing-unit / 2);
   max-width: calc(#{$post-content-width} - (#{$spacing-unit} * 2));
 
   & > .title {
@@ -37,7 +37,7 @@ main > .guide-page {
       position: relative;
 
       @include media-query($on-palm) {
-        margin: $spacing-unit / 2 auto;
+        margin: calc($spacing-unit / 2) auto;
       }
 
       .scroll-content {
@@ -116,13 +116,13 @@ main > .guide-page {
 
     .features {
       flex: 1 1 50%;
-      padding: $spacing-unit / 2 + 5px;
+      padding: calc($spacing-unit / 2 + 5px);
       border-radius: 8px;
       background-color: white;
       border: 1px solid $important-color;
 
       & > p {
-        margin-bottom: $spacing-unit / 2;
+        margin-bottom: calc($spacing-unit / 2);
         color: $secondary-text-color;
       }
 
@@ -184,7 +184,7 @@ main > .guide-page {
           &:nth-child(2) {
             position: absolute;
             left: 50%;
-            margin-left: -1 * $width / 2;
+            margin-left: calc(-1 * $width / 2);
           }
 
           @include media-query($on-laptop) {
@@ -221,7 +221,7 @@ main > .guide-page {
         background-color: $brand-color;
         color: white;
         border-radius: 8px;
-        padding: $spacing-unit / 2 $spacing-unit / 2 + 5px $spacing-unit / 2 + 5px;
+        padding: calc($spacing-unit / 2) calc($spacing-unit / 2 + 5px) calc($spacing-unit / 2 + 5px);
 
         h3 {
           margin-bottom: 0;
@@ -229,7 +229,7 @@ main > .guide-page {
           font-family: $base-font-family;
         }
         p.copy {
-          margin-bottom: $spacing-unit / 2 + 5px;
+          margin-bottom: calc($spacing-unit / 2 + 5px);
           color: #C3CED2;
           font-size: 14px;
           line-height: 1.375;
@@ -262,10 +262,10 @@ main > .guide-page {
 
         .email-octopus-form-row-subscribe {
           margin-top: 0;
-          margin-left: $spacing-unit / 2 + 5px;
+          margin-left: calc($spacing-unit / 2 + 5px);
 
           @include media-query($on-palm) {
-            margin-top: $spacing-unit / 2;
+            margin-top: calc($spacing-unit / 2);
             margin-left: 0;
           }
         }
@@ -307,7 +307,7 @@ main > .guide-page > .table-of-contents {
   margin: $spacing-unit 0 0;
 
   @include media-query($on-palm) {
-    margin: $spacing-unit / 2 0 2 * $spacing-unit - 5px;
+    margin: calc($spacing-unit / 2) 0 2 * $spacing-unit - 5px;
   }
 
   & > .wrapper {
@@ -357,7 +357,7 @@ main > .guide-page > .table-of-contents {
       padding: $spacing-unit 0 0;
 
       @include media-query($on-laptop) {
-        padding-top: $spacing-unit / 2;
+        padding-top: calc($spacing-unit / 2);
       }
 
       @include media-query($on-palm) {
@@ -380,7 +380,7 @@ main > .guide-page > .table-of-contents {
         }
 
         &:after {
-          margin-top: $spacing-unit / 2;
+          margin-top: calc($spacing-unit / 2);
           content: "";
           display: block;
           border-top: 1px dashed $important-color;
@@ -399,10 +399,10 @@ main > .guide-page > .table-of-contents {
 
       & > ul {
         margin: 0;
-        padding: $spacing-unit / 2 - 3px $spacing-unit 0;
+        padding: calc($spacing-unit / 2 - 3px) $spacing-unit 0;
 
         @include media-query($on-laptop) {
-          padding: $spacing-unit / 2 $spacing-unit / 2 0;
+          padding: calc($spacing-unit / 2) calc($spacing-unit / 2) 0;
         }
 
         & > li {
@@ -450,7 +450,7 @@ main > .guide-page > .table-of-contents {
   div.part {
 
     .header {
-      margin: 0 $spacing-unit / 2 $spacing-unit - 10px;
+      margin: 0 calc($spacing-unit / 2) $spacing-unit - 10px;
 
       @include media-query($on-palm) {
         margin-bottom: $spacing-unit - 5px;
@@ -507,7 +507,7 @@ main > .guide-page > .table-of-contents {
         padding: $spacing-unit 0 0;
 
         @include media-query($on-laptop) {
-          padding-top: $spacing-unit / 2;
+          padding-top: calc($spacing-unit / 2);
         }
 
         @include media-query($on-palm) {
@@ -530,7 +530,7 @@ main > .guide-page > .table-of-contents {
           }
 
           &:after {
-            margin-top: $spacing-unit / 2;
+            margin-top: calc($spacing-unit / 2);
             content: "";
             display: block;
             border-top: 1px dashed $important-color;
@@ -549,10 +549,10 @@ main > .guide-page > .table-of-contents {
 
         & > ul {
           margin: 0;
-          padding: $spacing-unit / 2 - 3px $spacing-unit 0;
+          padding: calc($spacing-unit / 2 - 3px) $spacing-unit 0;
 
           @include media-query($on-laptop) {
-            padding: $spacing-unit / 2 $spacing-unit / 2 0;
+            padding: calc($spacing-unit / 2) calc($spacing-unit / 2) 0;
           }
 
           & > li {
@@ -614,8 +614,8 @@ main > .guide-page > .table-of-contents {
 }
 
 aside {
-  padding: $spacing-unit / 2;
-  margin-bottom: $spacing-unit / 2;
+  padding: calc($spacing-unit / 2);
+  margin-bottom: calc($spacing-unit / 2);
   border-radius: 0 4px 4px 0;
 
   &.info {
diff --git a/_sass/lander.scss b/_sass/lander.scss
index 99ab9d95a..9f3056fee 100644
--- a/_sass/lander.scss
+++ b/_sass/lander.scss
@@ -63,10 +63,10 @@
       $button-margin: 4px;
       $controls-width: 3 * $button-size + 2 * $button-margin;
 
-      padding: 9px 9px + 5px + $controls-width 0 $spacing-unit / 2;
+      padding: 9px 9px + 5px + $controls-width 0 calc($spacing-unit / 2);
     }
 
-    padding: $spacing-unit / 2 $spacing-unit / 2 + 5px + $controls-width 0 $spacing-unit / 2 + 5px;
+    padding: calc($spacing-unit / 2) calc($spacing-unit / 2 + 5px + $controls-width) 0 calc($spacing-unit / 2 + 5px);
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -105,7 +105,7 @@
 
   .code-block {
     margin: 0 $spacing-unit - 10px 0;
-    padding: $spacing-unit / 2 + 3px 0 $spacing-unit - 10px;
+    padding: calc($spacing-unit / 2 + 3px) 0 $spacing-unit - 10px;
 
     color: white;
     font-size: 18px;
@@ -114,8 +114,8 @@
 
     @include media-query($on-palm) {
       font-size: 12px;
-      margin: 0 $spacing-unit / 2;
-      padding: $spacing-unit / 4 0 $spacing-unit / 2;
+      margin: 0 calc($spacing-unit / 2);
+      padding: calc($spacing-unit / 4) 0 calc($spacing-unit / 2);
     }
 
     .token-line {
@@ -168,14 +168,14 @@
     $button-margin: 6px;
     $controls-width: 3 * $button-size + 2 * $button-margin;
 
-    padding: 13px 13px + 5px + $controls-width 0 $spacing-unit / 2 + 3px;
+    padding: 13px 13px + 5px + $controls-width 0 calc($spacing-unit / 2 + 3px);
 
     @include media-query($on-palm) {
       $button-size: 9px;
       $button-margin: 4px;
       $controls-width: 3 * $button-size + 2 * $button-margin;
 
-      padding: 9px 9px + 5px + $controls-width 0 $spacing-unit / 2;
+      padding: 9px 9px + 5px + $controls-width 0 calc($spacing-unit / 2);
     }
 
     .controls {
@@ -194,13 +194,13 @@
   }
   .code-block {
     margin: 0 $spacing-unit - 12px;
-    padding: $spacing-unit / 2 - 8px 0 $spacing-unit - 14px;
+    padding: calc($spacing-unit / 2 - 8px) 0 $spacing-unit - 14px;
     font-size: 14px;
 
     @include media-query($on-palm) {
       font-size: 12px;
-      margin: 0 $spacing-unit / 2;
-      padding: $spacing-unit / 4 0 $spacing-unit / 2;
+      margin: 0 calc($spacing-unit / 2);
+      padding: calc($spacing-unit / 4) 0 calc($spacing-unit / 2);
     }
 
     .token-line {
@@ -256,7 +256,7 @@
     overflow: hidden;
 
     @include media-query($on-laptop) {
-      padding: 0 $spacing-unit / 2 1.5 * $spacing-unit;
+      padding: 0 calc($spacing-unit / 2) 1.5 * $spacing-unit;
     }
     @include media-query($on-palm) {
       overflow: visible;
@@ -265,7 +265,7 @@
   }
 
   .site-announcement {
-    margin: 0 auto $spacing-unit / 2 + 5px;
+    margin: 0 auto calc($spacing-unit / 2 + 5px);
     max-width: 560px;
     display: flex;
     align-items: center;
@@ -361,7 +361,7 @@
   }
 
   .site-description-full {
-    margin: $spacing-unit / 2 + 5px auto 0;
+    margin: calc($spacing-unit / 2 + 5px) auto 0;
     max-width: 600px;
     line-height: 1.7;
     font-size: 28px;
@@ -378,12 +378,12 @@
       font-size: 16px;
     }
     @include media-query($on-palm) {
-      margin-top: $spacing-unit / 2;
+      margin-top: calc($spacing-unit / 2);
     }
   }
 
   .site-command {
-    padding-top: $spacing-unit / 2;
+    padding-top: calc($spacing-unit / 2);
     font-family: $code-font-family;
     font-size: 20px;
 
@@ -444,7 +444,7 @@
     text-align: center;
 
     @include media-query($on-palm) {
-      margin-top: $spacing-unit / 2 + 3px;
+      margin-top: calc($spacing-unit / 2 + 3px);
       display: block;
     }
 
@@ -509,7 +509,7 @@
         margin-left: $spacing-unit;
 
         @include media-query($on-palm) {
-          margin-top: $spacing-unit / 2 + 3px;
+          margin-top: calc($spacing-unit / 2 + 3px);
           margin-left: 0;
         }
       }
@@ -669,7 +669,7 @@
 
 .home > .sections {
   text-align: center;
-  padding: $spacing-unit / 2 $spacing-unit 0;
+  padding: calc($spacing-unit / 2) $spacing-unit 0;
   overflow: hidden;
 
   @include media-query($on-palm) {
@@ -678,7 +678,7 @@
 
   &:after {
     @include media-query($on-palm) {
-      margin-top: $spacing-unit / 2;
+      margin-top: calc($spacing-unit / 2);
       border: none;
     }
   }
@@ -692,7 +692,7 @@
     position: relative;
 
     @include media-query($on-palm) {
-      padding: 0 $spacing-unit / 2;
+      padding: 0 calc($spacing-unit / 2);
     }
 
     h2 {
@@ -826,14 +826,14 @@
     @extend %code-editor;
 
     @include media-query($on-palm) {
-      margin-top: $spacing-unit / 2 - 2px;
+      margin-top: calc($spacing-unit / 2 - 2px);
       width: auto;
     }
   }
 }
 
 .home > .frontend > .timeline {
-  margin: $spacing-unit / 2 auto 0;
+  margin: calc($spacing-unit / 2) auto 0;
   height: 200px;
   @extend %timeline;
 
@@ -876,11 +876,11 @@
   }
   @include media-query($on-palm) {
     &:nth-child(2) {
-      margin-top: $spacing-unit / 2;
+      margin-top: calc($spacing-unit / 2);
       display: block;
     }
     &:last-child {
-      margin-top: $spacing-unit / 2;
+      margin-top: calc($spacing-unit / 2);
       height: $spacing-unit * 2.5;
       visibility: visible;
     }
@@ -896,7 +896,7 @@
 
   @include media-query($on-palm) {
     flex-direction: column;
-    padding: 0 $spacing-unit / 2;
+    padding: 0 calc($spacing-unit / 2);
   }
 
   .code-editor {
@@ -909,7 +909,7 @@
     }
     @include media-query($on-palm) {
       order: 2;
-      margin-top: $spacing-unit / 2 - 3px;
+      margin-top: calc($spacing-unit / 2 - 3px);
       margin-bottom: 0;
     }
   }
@@ -923,7 +923,7 @@
     flex-direction: column;
 
     @include media-query($on-laptop) {
-      flex: 0 0 $spacing-unit / 2 + 10px;
+      flex: 0 0 calc($spacing-unit / 2 + 10px);
 
       .timeline {
         display: none;
@@ -1017,7 +1017,7 @@
   &.apis .copy,
   &.deploy .copy {
     @include media-query($on-palm) {
-      margin-top: $spacing-unit / 2;
+      margin-top: calc($spacing-unit / 2);
     }
   }
 
@@ -1031,7 +1031,7 @@
 
     @include media-query($on-palm) {
       order: 2;
-      margin-top: $spacing-unit / 2 - 3px;
+      margin-top: calc($spacing-unit / 2 - 3px);
       margin-bottom: 0;
       min-width: 0;
       width: 100%;
@@ -1088,7 +1088,7 @@
     $padding-x: 10px;
     $padding-y: 5px;
 
-    margin-top: $spacing-unit / 2 - 3px;
+    margin-top: calc($spacing-unit / 2 - 3px);
     margin-bottom: 0;
   }
 
@@ -1222,7 +1222,7 @@
 }
 
 .home > .learn-more {
-  margin-top: $spacing-unit / 2;
+  margin-top: calc($spacing-unit / 2);
   text-align: center;
 
   @include media-query($on-laptop) {
@@ -1258,7 +1258,7 @@
 
   @include media-query($on-palm) {
     margin-top: $spacing-unit;
-    padding: 0 $spacing-unit / 2;
+    padding: 0 calc($spacing-unit / 2);
   }
 
   &:after {
@@ -1298,7 +1298,7 @@
     }
 
     @include media-query($on-laptop) {
-      margin-bottom: $spacing-unit / 2;
+      margin-bottom: calc($spacing-unit / 2);
     }
 
     span {
@@ -1318,7 +1318,7 @@
     }
 
     li {
-      padding: 0 $spacing-unit / 2 + 5px;
+      padding: 0 calc($spacing-unit / 2 + 5px);
       border-right: 1px dashed $background-color;
       text-align: center;
       width: 300px;
@@ -1334,7 +1334,7 @@
         border-right: none;
 
         @include media-query($on-laptop) {
-          padding-bottom: $spacing-unit / 2;
+          padding-bottom: calc($spacing-unit / 2);
           border-bottom: none;
         }
       }
@@ -1375,7 +1375,7 @@
 
   @include media-query($on-palm) {
     margin: $spacing-unit + 2px auto 0;
-    padding: 0 $spacing-unit / 2;
+    padding: 0 calc($spacing-unit / 2);
   }
 
   & > .content {
@@ -1430,7 +1430,7 @@
       padding: 0;
       position: absolute;
       top: 50%;
-      margin-top: - $size / 2;
+      margin-top: - calc($size / 2);
       width: $size;
       height: $size;
       border-radius: 50%;
@@ -1439,7 +1439,7 @@
       cursor: pointer;
 
       @include media-query($on-palm) {
-        margin-top: - $mSize / 2;
+        margin-top: - calc($mSize / 2);
         width: $mSize;
         height: $mSize;
       }
@@ -1453,8 +1453,8 @@
 
           content: "";
           position: absolute;
-          left: - ($cSize - $mSize ) / 2;
-          top: - ($cSize - $mSize ) / 2;
+          left: calc(-1 * ($cSize - $mSize ) / 2);
+          top: calc(-1 * ($cSize - $mSize ) / 2);
           width: $cSize;
           height: $cSize;
         }
@@ -1470,10 +1470,10 @@
       }
 
       &.prev {
-        left: - $size / 2;
+        left: calc(-1 * $size / 2);
 
         @include media-query($on-palm) {
-          left: - $mSize / 2;
+          left: calc(-1 * $mSize / 2);
         }
 
         img {
@@ -1485,10 +1485,10 @@
         }
       }
       &.next {
-        right: - $size / 2;
+        right: calc(-1 * $size / 2);
 
         @include media-query($on-palm) {
-          right: - $mSize / 2;
+          right: calc(-1 * $mSize / 2);
         }
 
         img {
@@ -1537,7 +1537,7 @@
       text-align: left;
 
       @include media-query($on-palm) {
-        margin-left: $spacing-unit / 2;
+        margin-left: calc($spacing-unit / 2);
       }
 
       p {
@@ -1590,7 +1590,7 @@
     }
   }
   .sst-button {
-    margin-top: $spacing-unit / 2 + 5px;
+    margin-top: calc($spacing-unit / 2 + 5px);
     box-shadow: none;
     padding: {
       left: 2.5 * $spacing-unit;
@@ -1611,7 +1611,7 @@
   padding: 2 * $spacing-unit $spacing-unit 0;
 
   @include media-query($on-laptop) {
-    padding: 2 * $spacing-unit $spacing-unit / 2 0;
+    padding: 2 * $spacing-unit ($spacing-unit * 0.5) 0;
   }
   @include media-query($on-palm) {
     padding-top: 0;
@@ -1746,7 +1746,7 @@
     .main-form {
       flex-grow: 1;
       flex-wrap: nowrap;
-      gap: $spacing-unit / 2;
+      gap: calc($spacing-unit * 0.5);
 
       @include media-query($on-palm) {
         flex-wrap: wrap;
@@ -1771,7 +1771,7 @@
  */
 .home .updates {
   margin: 0 auto;
-  padding: 0 $spacing-unit / 2;
+  padding: 0 calc($spacing-unit * 0.5);
   display: flex;
   align-items: stretch;
 
@@ -1782,7 +1782,7 @@
   .updates-desc {
     flex: 1 1 50%;
     margin: 0;
-    padding: 4 * $spacing-unit + 7px $spacing-unit / 2 0.5 * $spacing-unit + 5px 0;
+    padding: 4 * $spacing-unit + 7px calc($spacing-unit * 0.5) 0.5 * $spacing-unit + 5px 0;
     border-right: 1px solid darken($background-color, 35%);
     text-align: right;
     color: $tertiary-text-color;
@@ -1793,7 +1793,7 @@
     box-sizing: border-box;
 
     @include media-query($on-palm) {
-      padding: $spacing-unit / 2 0;
+      padding: calc($spacing-unit / 2) 0;
       border: none;
       text-align: center;
     }
@@ -1833,7 +1833,7 @@
     }
 
     .copy {
-      margin-top: $spacing-unit / 2;
+      margin-top: $spacing-unit * 0.5;
 
       @include media-query($on-palm) {
         margin: 0;
@@ -1869,7 +1869,7 @@
   margin: 2 * $spacing-unit 0;
 
   @include media-query($on-palm) {
-    margin: $spacing-unit / 2 0 2 * $spacing-unit - 5px;
+    margin: $spacing-unit * 0.5 0 2 * $spacing-unit - 5px;
   }
 
   .chapters {
@@ -1899,7 +1899,7 @@
       padding: $spacing-unit 0 0;
 
       @include media-query($on-laptop) {
-        padding-top: $spacing-unit / 2;
+        padding-top: $spacing-unit * 0.5;
       }
 
       @include media-query($on-palm) {
@@ -1922,7 +1922,7 @@
         }
 
         &:after {
-          margin-top: $spacing-unit / 2;
+          margin-top: $spacing-unit * 0.5;
           content: "";
           display: block;
           border-top: 1px dashed $important-color;
@@ -1941,10 +1941,10 @@
 
       & > ul {
         margin: 0;
-        padding: $spacing-unit / 2 - 3px $spacing-unit 0;
+        padding: $spacing-unit * 0.5 - 3px $spacing-unit 0;
 
         @include media-query($on-laptop) {
-          padding: $spacing-unit / 2 $spacing-unit / 2 0;
+          padding: $spacing-unit * 0.5 $spacing-unit * 0.5 0;
         }
 
         & > li {
diff --git a/_sass/theme/_base.scss b/_sass/theme/_base.scss
index 7d88956ca..56c531540 100644
--- a/_sass/theme/_base.scss
+++ b/_sass/theme/_base.scss
@@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc($spacing-unit / 2);
 }
 
 
@@ -148,7 +148,7 @@ a {
 blockquote {
   color: $tertiary-text-color;
   border-left: 4px solid $grey-color-light;
-  padding-left: $spacing-unit / 2;
+  padding-left: calc($spacing-unit / 2);
   font-size: 26px;
   letter-spacing: -1px;
   font-style: italic;
@@ -214,8 +214,8 @@ pre {
   @include media-query($on-laptop) {
     max-width: -webkit-calc(#{$post-content-width} - (#{$spacing-unit}));
     max-width:         calc(#{$post-content-width} - (#{$spacing-unit}));
-    padding-right: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
+    padding-right: calc($spacing-unit / 2);
+    padding-left: calc($spacing-unit / 2);
   }
 }
 .wrapper-single-col {
@@ -230,8 +230,8 @@ pre {
   @include media-query($on-laptop) {
     max-width: -webkit-calc(#{$page-content-width} - (#{$spacing-unit}));
     max-width:         calc(#{$page-content-width} - (#{$spacing-unit}));
-    padding-right: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
+    padding-right: calc($spacing-unit / 2);
+    padding-left: calc($spacing-unit / 2);
   }
 }
 
@@ -268,7 +268,7 @@ pre {
 table {
   border-collapse: collapse;
   width: 100%;
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc($spacing-unit / 2);
 }
 
 td, th {
@@ -346,7 +346,7 @@ hr {
 
 /** YouTube Embeds **/
 .youtube-container {
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc($spacing-unit / 2);
   overflow: hidden;
   position: relative;
   width:100%;
diff --git a/_sass/theme/_layout.scss b/_sass/theme/_layout.scss
index 765d54076..e273cb31c 100644
--- a/_sass/theme/_layout.scss
+++ b/_sass/theme/_layout.scss
@@ -154,8 +154,8 @@
       overflow-y: scroll;
 
       @include media-query($on-palm) {
-        padding-left: $spacing-unit / 2;
-        padding-right: $spacing-unit / 2;
+        padding-left: calc($spacing-unit / 2);
+        padding-right: calc($spacing-unit / 2);
       }
 
       .col1 {
@@ -198,7 +198,7 @@
         }
         .social {
           a:not(:last-child) {
-            margin-right: $spacing-unit / 2;
+            margin-right: calc($spacing-unit / 2);
           }
           .github {
             .stars {
@@ -217,8 +217,8 @@
     color: $secondary-text-color;
 
     @include media-query($on-laptop) {
-      padding-left: $spacing-unit / 2;
-      padding-right: $spacing-unit / 2;
+      padding-left: calc($spacing-unit / 2);
+      padding-right: calc($spacing-unit / 2);
     }
 
     @include media-query($on-palm) {
@@ -241,15 +241,15 @@
 
   & > .wrapper-header {
     margin: 0 auto;
-    padding: $spacing-unit / 2 + 5px $spacing-unit 0;
+    padding: calc($spacing-unit / 2 + 5px) $spacing-unit 0;
 
     &:after {
       @extend %bottom-border;
-      margin-top: $spacing-unit / 2 + 5px;
+      margin-top: calc($spacing-unit / 2 + 5px);
     }
 
     @include media-query($on-laptop) {
-      padding: $spacing-unit / 2 $spacing-unit / 2 0;
+      padding: calc($spacing-unit / 2) calc($spacing-unit / 2) 0;
     }
 
     & > .content {
@@ -277,8 +277,8 @@
 
               content: "";
               position: absolute;
-              left: - ($cSize - 28px ) / 2;
-              top: - ($cSize - 28px ) / 2;
+              left: calc(-1 * ($cSize - 28px ) / 2);
+              top: calc(-1 * ($cSize - 28px ) / 2);
               width: $cSize;
               height: $cSize;
             }
@@ -295,7 +295,7 @@
       }
 
       .col2 {
-        margin-left: $spacing-unit / 2;
+        margin-left: calc($spacing-unit / 2);
         display: flex;
         align-items: center;
       }
@@ -319,7 +319,7 @@
           a.links {
             margin: 0;
             display: none;
-            padding: $spacing-unit / 4 0;
+            padding: calc($spacing-unit / 4) 0;
           }
         }
         .col2 {
@@ -428,7 +428,7 @@
   }
 
   section.search {
-    margin-left: $spacing-unit / 2 + 5px;
+    margin-left: calc($spacing-unit / 2) + 5px;
     @extend %search;
 
     @include media-query($on-monitor) {
@@ -630,7 +630,7 @@
     }
 
     a {
-      margin-right: $spacing-unit / 3;
+      margin-right: calc($spacing-unit / 3);
     }
   }
 
@@ -654,7 +654,7 @@
   }
 
   .site-buttons {
-    margin: - 1 * $spacing-unit / 2 + 5px;
+    margin: calc(-1 * 0.5 * $spacing-unit  + 5px);
     padding-left: 5px;
     display: flex;
     flex-wrap: wrap;
@@ -667,7 +667,7 @@
     }
 
     .sst-button {
-      margin: $spacing-unit / 2 - 5px;
+      margin: calc($spacing-unit / 2 - 5px);
       padding: 13px 35px;
       line-height: 30px;
       flex: 1 1 auto;
@@ -761,21 +761,21 @@
 
 .page-content .post-container > .sidebar {
   margin-left: $spacing-unit;
-  padding-top: $spacing-unit / 2;
+  padding-top: calc($spacing-unit / 2);
   flex: 0 0 300px;
   font-size: 14px;
 
   @include media-query($on-laptop) {
     margin-left: 0;
     border-top: 2px solid $grey-color-light;
-    padding-top: $spacing-unit / 2 + 3px;
+    padding-top: calc($spacing-unit / 2 + 3px);
     order: 99;
   }
 
   .context-cta {
     background-color: $brand-color;
     border-radius: 5px;
-    padding: $spacing-unit / 2;
+    padding: calc($spacing-unit / 2);
     color: white;
 
     @include media-query($on-laptop) {
@@ -783,14 +783,14 @@
     }
 
     .header {
-      margin-bottom: $spacing-unit / 2;
+      margin-bottom: calc($spacing-unit / 2);
       padding-left: 98px;
       padding-bottom: 6px;
       position: relative;
 
       img {
         left: 0;
-        top: - (21px + $spacing-unit / 2);
+        top: calc(-1 * 0.5 * $spacing-unit - 21px);
         position: absolute;
         box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25),
                     0 3px 3px rgba(0, 0, 0, 0.125),
@@ -836,7 +836,7 @@
 
   p.section {
     margin-top: $spacing-unit;
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
     font-family: $heading-font-family;
     font-weight: 700;
     a {
@@ -890,7 +890,7 @@
 }
 .post-header {
   margin-bottom: $spacing-unit;
-  padding-bottom: $spacing-unit / 2;
+  padding-bottom: calc($spacing-unit / 2);
   border-bottom: 1px solid $grey-color-light;
 }
 
@@ -975,7 +975,7 @@
   }
 
   .video-wrapper {
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
@@ -996,7 +996,7 @@
   text-align: center;
 
   @include media-query($on-laptop) {
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
   }
 
   .banners {
@@ -1023,7 +1023,7 @@
 }
 
 .post-closing {
-  margin-top: $spacing-unit / 2;
+  margin-top: calc($spacing-unit / 2);
   text-align: center;
 
   p {
@@ -1075,7 +1075,7 @@
 .post-footer {
   @extend %clearfix;
   margin-top: 3 * $spacing-unit;
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc($spacing-unit / 2);
 
   text-align: center;
 
@@ -1133,7 +1133,7 @@
   padding: $spacing-unit - 5px;
 
   @include media-query($on-palm) {
-    padding: $spacing-unit / 2;
+    padding: calc($spacing-unit / 2);
   }
 
   p {
diff --git a/assets/main.scss b/assets/main.scss
index e55edb2ba..19319beb6 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -207,7 +207,7 @@ div.support-footer {
     border-radius: 5px;
 
     @include media-query($on-palm) {
-      padding: $spacing-unit / 2;
+      padding: $spacing-unit * 0.5;
     }
 
     div.share {
@@ -253,7 +253,7 @@ div.support-footer {
 
       @include media-query($on-monitor) {
         margin-right: 0;
-        margin-bottom: $spacing-unit / 2;
+        margin-bottom: $spacing-unit * 0.5;
         text-align: center;
       }
 
@@ -395,7 +395,7 @@ div.support-footer {
 div.newsletter div.divider {
   $color: lighten($brand-color, 20%);
 
-  margin: $spacing-unit / 2 $spacing-unit - 10px;
+  margin: $spacing-unit * 0.5 $spacing-unit - 10px;
   text-align: center;
   position: relative;
 
@@ -463,12 +463,12 @@ div.standalone-newsletter-form-container {
   margin: 60px 0 100px;
 
   @include media-query($on-palm) {
-    margin: 0 0 $spacing-unit / 2;
+    margin: 0 0 $spacing-unit * 0.5;
   }
 }
 
 div.standalone-newsletter-form {
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: $spacing-unit * 0.5;
   background-color: $brand-color;
   border-radius: 5px;
   padding: $spacing-unit;
@@ -478,7 +478,7 @@ div.standalone-newsletter-form {
   justify-content: space-between;
 
   @include media-query($on-palm) {
-    padding: $spacing-unit / 2;
+    padding: $spacing-unit * 0.5;
     display: block;
     text-align: center;
   }
@@ -488,7 +488,7 @@ div.standalone-newsletter-form {
 
     @include media-query($on-palm) {
       margin-right: 0;
-      margin-bottom: $spacing-unit / 2;
+      margin-bottom: $spacing-unit * 0.5;
     }
 
     p {
@@ -509,7 +509,7 @@ div.standalone-newsletter-form {
       margin-top: 0 !important;
     }
     .emailoctopus-form-row {
-      margin-bottom: $spacing-unit / 2 !important;
+      margin-bottom: $spacing-unit * 0.5 !important;
     }
   }