add variables for most spacing and size values

web/src/components/layout/footer.module.scss

@@ -1,5 +1,5 @@
 .footer {
-  padding: var(--spacing-sitepadding);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
   background: var(--color-chateauBlue);
   color: var(--color-betongGray);
   position: relative;
@@ -53,7 +53,7 @@
   }
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
     grid-column: span 3;
   }
 }
@@ -62,7 +62,7 @@
   ul {
     display: flex;
     grid-column: span 9;
-    gap: 1rem;
+    gap: var(--spacing-s);
   }
 }
 
@@ -99,6 +99,6 @@
 
 .toTop {
   position: absolute;
-  right: var(--spacing-sitepadding);
-  bottom: var(--spacing-sitepadding);
+  right: var(--spacing-sitepadding-inline);
+  bottom: var(--spacing-sitepadding-block);
 }

web/src/components/layout/header.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: var(--spacing-sitepadding);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
 
   ul {
     list-style: none;
@@ -21,7 +21,7 @@
 
 .siteMenu {
   display: flex;
-  gap: var(--spacing-sitepadding);
+  gap: var(--spacing-gap-column);
   align-items: center;
   height: 3rem;
 
@@ -33,7 +33,7 @@
 .mainMenu {
   list-style: none;
   display: flex;
-  gap: var(--spacing-sitepadding);
+  gap: var(--spacing-gap-column);
   animation: slideInFromRight .3s ease-out forwards;
 
   a {
@@ -76,7 +76,7 @@
 
   background: var(--color-menu-background);
   color: var(--color-menu-text);
-  padding: var(--spacing-sitepadding);
+  padding: var(--spacing-sitepadding-block);
 
   transition: all var(--transition-easing);
 
@@ -85,7 +85,7 @@
     flex-direction: column;
     justify-content: center;
     font-size: 1.4rem;
-    padding: var(--spacing-sitepadding) 0;
+    padding: var(--spacing-sitepadding-block) 0;
   }
 }
 
@@ -113,7 +113,7 @@
 
   .toggleMenu {
     position: fixed;
-    right: var(--spacing-sitepadding);
+    right: var(--spacing-sitepadding-inline);
   }
 
   .menuIcon {