Mobile first approach

src/core/client/ui/theme/global.css

@@ -1,5 +0,0 @@
-@media (max-width: $breakpoints-sm) {
-  :root {
-    --spacing-unit: calc(0.5 * var(--spacing-unit));
-  }
-}

src/core/client/ui/theme/variables.css

@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: var(--spacing-unit-small);
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: var(--spacing-unit-large);
+  }
+}

src/core/client/ui/theme/variables.ts

@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 10,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */