diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
index 290a3c94c62bb..c68edd3e4b6e9 100644
--- a/administrator/templates/atum/scss/_variables.scss
+++ b/administrator/templates/atum/scss/_variables.scss
@@ -144,6 +144,7 @@ $danger-bg:                        #900;
 $badge-font-size:                  .75rem;
 $jicon-css-prefix:                 icon !default;
 $fa-css-prefix:                    fa !default;
+$fa-fw-width:                      (20em * .0625);
 $fa-font-path:                     "../../../../media/vendor/fontawesome-free/webfonts";
 $roboto-font-path:                 "../../../../media/vendor/roboto-fontface/fonts";
 
diff --git a/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss b/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
index 070a89d4424e4..3d5ddf6b6f50a 100644
--- a/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
+++ b/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss
@@ -1,6 +1,7 @@
 // Override the font path
 $fa-css-prefix:                    fa;
 $fa-font-path:                     "../../../../../../media/vendor/fontawesome-free/webfonts" !default;
+$fa-fw-width:                      (20em * .0625);
 
 // Font Awesome 5 Free
 @import "../../../../../../media/vendor/fontawesome-free/scss/fontawesome";
diff --git a/build/media_source/com_media/scss/components/_layout.scss b/build/media_source/com_media/scss/components/_layout.scss
index 3fd746c20825d..7358995d175af 100644
--- a/build/media_source/com_media/scss/components/_layout.scss
+++ b/build/media_source/com_media/scss/components/_layout.scss
@@ -27,8 +27,8 @@
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: ($col-gutter-width / 2);
-  padding-left: ($col-gutter-width / 2);
+  padding-right: $col-gutter-width * .5;
+  padding-left: $col-gutter-width * .5;
 }
 
 @media (min-width: var(--breakpoint-md)) {
diff --git a/build/media_source/com_media/scss/components/_media-infobar.scss b/build/media_source/com_media/scss/components/_media-infobar.scss
index fb752107babdc..a849e27977606 100644
--- a/build/media_source/com_media/scss/components/_media-infobar.scss
+++ b/build/media_source/com_media/scss/components/_media-infobar.scss
@@ -24,15 +24,15 @@ $fa-css-prefix:    fa;
   dl {
     display: flex;
     flex-wrap: wrap;
-    margin-right: -($col-gutter-width / 2);
-    margin-left: -($col-gutter-width / 2);
+    margin-right: -($col-gutter-width * .5);
+    margin-left: -($col-gutter-width * .5);
   }
   dt, dd {
     position: relative;
     width: 100%;
     min-height: 1px;
-    padding-right: ($col-gutter-width / 2);
-    padding-left: ($col-gutter-width / 2);
+    padding-right: ($col-gutter-width * .5);
+    padding-left: ($col-gutter-width * .5);
   }
   dt {
     font-weight: normal;
diff --git a/build/media_source/com_media/scss/components/_media-tree.scss b/build/media_source/com_media/scss/components/_media-tree.scss
index 8ad38bde922a9..3e297d579acaa 100644
--- a/build/media_source/com_media/scss/components/_media-tree.scss
+++ b/build/media_source/com_media/scss/components/_media-tree.scss
@@ -41,7 +41,7 @@ ul.media-tree {
   display: block;
   &::before {
     position: absolute;
-    top: ($sidebar-tree-line-height / 2);
+    top: $sidebar-tree-line-height * .5;
     left: 0;
     width: 10px;
     height: 1px;
@@ -61,7 +61,7 @@ ul.media-tree {
   }
   &:last-child {
     &::after {
-      height: ($sidebar-tree-line-height / 2);
+      height: $sidebar-tree-line-height * .5;
     }
   }
   li {
diff --git a/build/media_source/system/scss/joomla-fontawesome.scss b/build/media_source/system/scss/joomla-fontawesome.scss
index f94624aaffa4f..fb0bf45f76d73 100644
--- a/build/media_source/system/scss/joomla-fontawesome.scss
+++ b/build/media_source/system/scss/joomla-fontawesome.scss
@@ -1,6 +1,7 @@
 // Override the font path
 $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts" !default;
 $fa-font-display: block !default;
+$fa-fw-width: 20em * .0625;
 
 // Font Awesome 5 Free
 @import "../../../../media/vendor/fontawesome-free/scss/fontawesome";
diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
index 2fd7dc027e100..310cc94848a49 100644
--- a/installation/template/scss/template.scss
+++ b/installation/template/scss/template.scss
@@ -3,6 +3,7 @@
 $jicon-css-prefix: icon;
 $fa-css-prefix: fa;
 $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
+$fa-fw-width: 20em * .0625;
 
 // Font Awesome
 @import "../../../administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome";
diff --git a/templates/cassiopeia/scss/tools/variables/_variables.scss b/templates/cassiopeia/scss/tools/variables/_variables.scss
index 4a10b9b082d8f..674623a4093a4 100644
--- a/templates/cassiopeia/scss/tools/variables/_variables.scss
+++ b/templates/cassiopeia/scss/tools/variables/_variables.scss
@@ -148,6 +148,7 @@ $cassiopeia-grid-gutter:              $grid-gutter-width;
 
 // Components
 $fa-font-path:                        "../../../media/vendor/fontawesome-free/webfonts";
+$fa-fw-width:                         20em * .0625;
 
 // Treeselect
 $treeselect-line-height:              2.2rem;