diff --git a/src/styles/spacing.css b/src/styles/spacing.css
index d495006..040295d 100644
--- a/src/styles/spacing.css
+++ b/src/styles/spacing.css
@@ -1,93 +1,93 @@
 :root {
-  --base-spacing: 8px;
+  --spacing: 8px;
 }
 
-.margin-none { margin: calc(var(--base-spacing) * 0); }
-.margin-xs { margin: calc(var(--base-spacing) * 0.25); }
-.margin-sm { margin: calc(var(--base-spacing) * 0.5); }
-.margin-md { margin: calc(var(--base-spacing) * 1); }
-.margin-lg { margin: calc(var(--base-spacing) * 2); }
-.margin-xl { margin: calc(var(--base-spacing) * 3); }
-.margin-xxl { margin: calc(var(--base-spacing) * 4); }
-.margin-xxxl { margin: calc(var(--base-spacing) * 5); }
+.margin-none { margin: calc(var(--spacing) * 0); }
+.margin-xs { margin: calc(var(--spacing) * 0.25); }
+.margin-sm { margin: calc(var(--spacing) * 0.5); }
+.margin-md { margin: calc(var(--spacing) * 1); }
+.margin-lg { margin: calc(var(--spacing) * 2); }
+.margin-xl { margin: calc(var(--spacing) * 3); }
+.margin-xxl { margin: calc(var(--spacing) * 4); }
+.margin-xxxl { margin: calc(var(--spacing) * 5); }
 
-.margin-left-none { margin-left: calc(var(--base-spacing) * 0); }
-.margin-left-xs { margin-left: calc(var(--base-spacing) * 0.25); }
-.margin-left-sm { margin-left: calc(var(--base-spacing) * 0.5); }
-.margin-left-md { margin-left: calc(var(--base-spacing) * 1); }
-.margin-left-lg { margin-left: calc(var(--base-spacing) * 2); }
-.margin-left-xl { margin-left: calc(var(--base-spacing) * 3); }
-.margin-left-xxl { margin-left: calc(var(--base-spacing) * 4); }
-.margin-left-xxxl { margin-left: calc(var(--base-spacing) * 5); }
+.margin-left-none { margin-left: calc(var(--spacing) * 0); }
+.margin-left-xs { margin-left: calc(var(--spacing) * 0.25); }
+.margin-left-sm { margin-left: calc(var(--spacing) * 0.5); }
+.margin-left-md { margin-left: calc(var(--spacing) * 1); }
+.margin-left-lg { margin-left: calc(var(--spacing) * 2); }
+.margin-left-xl { margin-left: calc(var(--spacing) * 3); }
+.margin-left-xxl { margin-left: calc(var(--spacing) * 4); }
+.margin-left-xxxl { margin-left: calc(var(--spacing) * 5); }
 
-.margin-right-none { margin-right: calc(var(--base-spacing) * 0); }
-.margin-right-xs { margin-right: calc(var(--base-spacing) * 0.25); }
-.margin-right-sm { margin-right: calc(var(--base-spacing) * 0.5); }
-.margin-right-md { margin-right: calc(var(--base-spacing) * 1); }
-.margin-right-lg { margin-right: calc(var(--base-spacing) * 2); }
-.margin-right-xl { margin-right: calc(var(--base-spacing) * 3); }
-.margin-right-xxl { margin-right: calc(var(--base-spacing) * 4); }
-.margin-right-xxxl { margin-right: calc(var(--base-spacing) * 5); }
+.margin-right-none { margin-right: calc(var(--spacing) * 0); }
+.margin-right-xs { margin-right: calc(var(--spacing) * 0.25); }
+.margin-right-sm { margin-right: calc(var(--spacing) * 0.5); }
+.margin-right-md { margin-right: calc(var(--spacing) * 1); }
+.margin-right-lg { margin-right: calc(var(--spacing) * 2); }
+.margin-right-xl { margin-right: calc(var(--spacing) * 3); }
+.margin-right-xxl { margin-right: calc(var(--spacing) * 4); }
+.margin-right-xxxl { margin-right: calc(var(--spacing) * 5); }
 
-.margin-top-none { margin-top: calc(var(--base-spacing) * 0); }
-.margin-top-xs { margin-top: calc(var(--base-spacing) * 0.25); }
-.margin-top-sm { margin-top: calc(var(--base-spacing) * 0.5); }
-.margin-top-md { margin-top: calc(var(--base-spacing) * 1); }
-.margin-top-lg { margin-top: calc(var(--base-spacing) * 2); }
-.margin-top-xl { margin-top: calc(var(--base-spacing) * 3); }
-.margin-top-xxl { margin-top: calc(var(--base-spacing) * 4); }
-.margin-top-xxxl { margin-top: calc(var(--base-spacing) * 5); }
+.margin-top-none { margin-top: calc(var(--spacing) * 0); }
+.margin-top-xs { margin-top: calc(var(--spacing) * 0.25); }
+.margin-top-sm { margin-top: calc(var(--spacing) * 0.5); }
+.margin-top-md { margin-top: calc(var(--spacing) * 1); }
+.margin-top-lg { margin-top: calc(var(--spacing) * 2); }
+.margin-top-xl { margin-top: calc(var(--spacing) * 3); }
+.margin-top-xxl { margin-top: calc(var(--spacing) * 4); }
+.margin-top-xxxl { margin-top: calc(var(--spacing) * 5); }
 
-.margin-bottom-none { margin-bottom: calc(var(--base-spacing) * 0); }
-.margin-bottom-xs { margin-bottom: calc(var(--base-spacing) * 0.25); }
-.margin-bottom-sm { margin-bottom: calc(var(--base-spacing) * 0.5); }
-.margin-bottom-md { margin-bottom: calc(var(--base-spacing) * 1); }
-.margin-bottom-lg { margin-bottom: calc(var(--base-spacing) * 2); }
-.margin-bottom-xl { margin-bottom: calc(var(--base-spacing) * 3); }
-.margin-bottom-xxl { margin-bottom: calc(var(--base-spacing) * 4); }
-.margin-bottom-xxxl { margin-bottom: calc(var(--base-spacing) * 5); }
+.margin-bottom-none { margin-bottom: calc(var(--spacing) * 0); }
+.margin-bottom-xs { margin-bottom: calc(var(--spacing) * 0.25); }
+.margin-bottom-sm { margin-bottom: calc(var(--spacing) * 0.5); }
+.margin-bottom-md { margin-bottom: calc(var(--spacing) * 1); }
+.margin-bottom-lg { margin-bottom: calc(var(--spacing) * 2); }
+.margin-bottom-xl { margin-bottom: calc(var(--spacing) * 3); }
+.margin-bottom-xxl { margin-bottom: calc(var(--spacing) * 4); }
+.margin-bottom-xxxl { margin-bottom: calc(var(--spacing) * 5); }
 
-.padding-none { padding: calc(var(--base-spacing) * 0); }
-.padding-xs { padding: calc(var(--base-spacing) * 0.25); }
-.padding-sm { padding: calc(var(--base-spacing) * 0.5); }
-.padding-md { padding: calc(var(--base-spacing) * 1); }
-.padding-lg { padding: calc(var(--base-spacing) * 2); }
-.padding-xl { padding: calc(var(--base-spacing) * 3); }
-.padding-xxl { padding: calc(var(--base-spacing) * 4); }
-.padding-xxxl { padding: calc(var(--base-spacing) * 5); }
+.padding-none { padding: calc(var(--spacing) * 0); }
+.padding-xs { padding: calc(var(--spacing) * 0.25); }
+.padding-sm { padding: calc(var(--spacing) * 0.5); }
+.padding-md { padding: calc(var(--spacing) * 1); }
+.padding-lg { padding: calc(var(--spacing) * 2); }
+.padding-xl { padding: calc(var(--spacing) * 3); }
+.padding-xxl { padding: calc(var(--spacing) * 4); }
+.padding-xxxl { padding: calc(var(--spacing) * 5); }
 
-.padding-left-none { padding-left: calc(var(--base-spacing) * 0); }
-.padding-left-xs { padding-left: calc(var(--base-spacing) * 0.25); }
-.padding-left-sm { padding-left: calc(var(--base-spacing) * 0.5); }
-.padding-left-md { padding-left: calc(var(--base-spacing) * 1); }
-.padding-left-lg { padding-left: calc(var(--base-spacing) * 2); }
-.padding-left-xl { padding-left: calc(var(--base-spacing) * 3); }
-.padding-left-xxl { padding-left: calc(var(--base-spacing) * 4); }
-.padding-left-xxxl { padding-left: calc(var(--base-spacing) * 5); }
+.padding-left-none { padding-left: calc(var(--spacing) * 0); }
+.padding-left-xs { padding-left: calc(var(--spacing) * 0.25); }
+.padding-left-sm { padding-left: calc(var(--spacing) * 0.5); }
+.padding-left-md { padding-left: calc(var(--spacing) * 1); }
+.padding-left-lg { padding-left: calc(var(--spacing) * 2); }
+.padding-left-xl { padding-left: calc(var(--spacing) * 3); }
+.padding-left-xxl { padding-left: calc(var(--spacing) * 4); }
+.padding-left-xxxl { padding-left: calc(var(--spacing) * 5); }
 
-.padding-right-none { padding-right: calc(var(--base-spacing) * 0); }
-.padding-right-xs { padding-right: calc(var(--base-spacing) * 0.25); }
-.padding-right-sm { padding-right: calc(var(--base-spacing) * 0.5); }
-.padding-right-md { padding-right: calc(var(--base-spacing) * 1); }
-.padding-right-lg { padding-right: calc(var(--base-spacing) * 2); }
-.padding-right-xl { padding-right: calc(var(--base-spacing) * 3); }
-.padding-right-xxl { padding-right: calc(var(--base-spacing) * 4); }
-.padding-right-xxxl { padding-right: calc(var(--base-spacing) * 5); }
+.padding-right-none { padding-right: calc(var(--spacing) * 0); }
+.padding-right-xs { padding-right: calc(var(--spacing) * 0.25); }
+.padding-right-sm { padding-right: calc(var(--spacing) * 0.5); }
+.padding-right-md { padding-right: calc(var(--spacing) * 1); }
+.padding-right-lg { padding-right: calc(var(--spacing) * 2); }
+.padding-right-xl { padding-right: calc(var(--spacing) * 3); }
+.padding-right-xxl { padding-right: calc(var(--spacing) * 4); }
+.padding-right-xxxl { padding-right: calc(var(--spacing) * 5); }
 
-.padding-top-none { padding-top: calc(var(--base-spacing) * 0); }
-.padding-top-xs { padding-top: calc(var(--base-spacing) * 0.25); }
-.padding-top-sm { padding-top: calc(var(--base-spacing) * 0.5); }
-.padding-top-md { padding-top: calc(var(--base-spacing) * 1); }
-.padding-top-lg { padding-top: calc(var(--base-spacing) * 2); }
-.padding-top-xl { padding-top: calc(var(--base-spacing) * 3); }
-.padding-top-xxl { padding-top: calc(var(--base-spacing) * 4); }
-.padding-top-xxxl { padding-top: calc(var(--base-spacing) * 5); }
+.padding-top-none { padding-top: calc(var(--spacing) * 0); }
+.padding-top-xs { padding-top: calc(var(--spacing) * 0.25); }
+.padding-top-sm { padding-top: calc(var(--spacing) * 0.5); }
+.padding-top-md { padding-top: calc(var(--spacing) * 1); }
+.padding-top-lg { padding-top: calc(var(--spacing) * 2); }
+.padding-top-xl { padding-top: calc(var(--spacing) * 3); }
+.padding-top-xxl { padding-top: calc(var(--spacing) * 4); }
+.padding-top-xxxl { padding-top: calc(var(--spacing) * 5); }
 
-.padding-bottom-none { padding-bottom: calc(var(--base-spacing) * 0); }
-.padding-bottom-xs { padding-bottom: calc(var(--base-spacing) * 0.25); }
-.padding-bottom-sm { padding-bottom: calc(var(--base-spacing) * 0.5); }
-.padding-bottom-md { padding-bottom: calc(var(--base-spacing) * 1); }
-.padding-bottom-lg { padding-bottom: calc(var(--base-spacing) * 2); }
-.padding-bottom-xl { padding-bottom: calc(var(--base-spacing) * 3); }
-.padding-bottom-xxl { padding-bottom: calc(var(--base-spacing) * 4); }
-.padding-bottom-xxxl { padding-bottom: calc(var(--base-spacing) * 5); }
+.padding-bottom-none { padding-bottom: calc(var(--spacing) * 0); }
+.padding-bottom-xs { padding-bottom: calc(var(--spacing) * 0.25); }
+.padding-bottom-sm { padding-bottom: calc(var(--spacing) * 0.5); }
+.padding-bottom-md { padding-bottom: calc(var(--spacing) * 1); }
+.padding-bottom-lg { padding-bottom: calc(var(--spacing) * 2); }
+.padding-bottom-xl { padding-bottom: calc(var(--spacing) * 3); }
+.padding-bottom-xxl { padding-bottom: calc(var(--spacing) * 4); }
+.padding-bottom-xxxl { padding-bottom: calc(var(--spacing) * 5); }