Clean CSS

src/style/_base.scss

@@ -1,7 +1,7 @@
 // CSS Variables
 :root {
     // Sizes
-    --container-width: $container-width;
+    --container-width: #{$container-width};
 
     // Animation
     --ease-quart: cubic-bezier(.165, .84, .44, 1);

src/style/_variables.scss

@@ -27,7 +27,6 @@ $font-sans: "Garnett", #{$replacement-sans};
 $font-serif: "Magnolia", #{$replacement-serif};
 
 
-
 /* Sizes, margins and spacing
 ====================================================================== */
 $base-width: 1600 !default;
@@ -44,14 +43,6 @@ $dir-img: "/images" !default;
 $dir-fonts: "/fonts" !default;
 
 
-/* Animation
-========================================================================== */
-// Easing
-$ease-cubic: cubic-bezier(.785, .135, .15, .86);
-$ease-quart: cubic-bezier(.165, .84, .44, 1);
-$ease-inout: ease-in-out;
-
-
 /* Responsive breakpoints
 ========================================================================== */
 $breakpoints: (

src/style/modules/_globe.scss

@@ -83,7 +83,7 @@
             }
 
             span {
-                transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
+                transition: color 0.4s var(--ease-quart), opacity 0.3s var(--ease-inout);
             }
 
             // Hover glow effect