diff --git a/web/src/components/associations/associationItem.module.scss b/web/src/components/associations/associationItem.module.scss
index 921591c..f56dd85 100644
--- a/web/src/components/associations/associationItem.module.scss
+++ b/web/src/components/associations/associationItem.module.scss
@@ -4,10 +4,11 @@
   display: grid;
   grid-template-columns: 1fr 2fr;
   align-items: flex-start;
-  gap: 1rem;
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
   background: var(--color-white);
   color: var(--color-black);
-  padding: 1rem;
+  padding: var(--spacing-s);
 }
 
 .image {
@@ -29,8 +30,7 @@
 }
 
 .title {
-  font-size: 1.2rem;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
 }
 
 .excerpt {
diff --git a/web/src/components/blocks/accordion.module.scss b/web/src/components/blocks/accordion.module.scss
index e83e4b0..515ef94 100644
--- a/web/src/components/blocks/accordion.module.scss
+++ b/web/src/components/blocks/accordion.module.scss
@@ -1,7 +1,7 @@
 .accordion {
   margin: var(--spacing-l) 0;
   max-width: var(--size-width-p);
-  padding: 1rem 0;
+  padding: var(--spacing-s) 0;
   border-top: var(--border-s);
   border-bottom: var(--border-s);
 
@@ -39,8 +39,8 @@
     content: "";
     display: block;
     position: absolute;
-    width: 3rem;
-    height: 3rem;
+    width: var(--size-icon-circle);
+    height: var(--size-icon-circle);
     background-size: 100%;
     background-image: url("/assets/icons/circle-arrow-right.svg");
     right: 0;
@@ -50,7 +50,7 @@
 }
 
 .accordionContent {
-  padding: 2rem 0 1rem;
+  padding: var(--spacing-m) 0 var(--spacing-s);
   display: none;
 }
 
diff --git a/web/src/components/blocks/featuredBlock.module.scss b/web/src/components/blocks/featuredBlock.module.scss
index 7301f2b..9362f34 100644
--- a/web/src/components/blocks/featuredBlock.module.scss
+++ b/web/src/components/blocks/featuredBlock.module.scss
@@ -1,7 +1,7 @@
 .featuredBlock {
   background: var(--color-background-secondary);
-  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: var(--spacing-gap-column);
@@ -22,7 +22,7 @@
   }
 
   +.featuredBlock {
-    margin-top: calc(var(--spacing-sitepadding)*-2);
+    margin-top: calc(var(--spacing-sitepadding-block)*-2);
   }
 
   &:last-child {
diff --git a/web/src/components/blocks/horizontalRuleBlock.module.scss b/web/src/components/blocks/horizontalRuleBlock.module.scss
index 956b3f9..f6ce7ca 100644
--- a/web/src/components/blocks/horizontalRuleBlock.module.scss
+++ b/web/src/components/blocks/horizontalRuleBlock.module.scss
@@ -1,9 +1,8 @@
 .horizontalRuleBlock {
   height: 3rem;
   width: 100%;
-  //max-width: calc(var(--size-width-p) + (var(--spacing-sitepadding)/2));
   max-width: var(--size-width-p);
-  margin: 1rem auto 4rem;
+  margin: var(--spacing-s) auto var(--spacing-section-bottom);
   overflow: hidden;
   position: relative;
 
diff --git a/web/src/components/blocks/iconListBlock.module.scss b/web/src/components/blocks/iconListBlock.module.scss
index e95679a..f881f8f 100644
--- a/web/src/components/blocks/iconListBlock.module.scss
+++ b/web/src/components/blocks/iconListBlock.module.scss
@@ -36,18 +36,18 @@
 }
 
 .text {
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
 
   h2 {
     font-size: var(--font-size-lead);
-    margin: .5rem 0;
+    margin: var(--spacing-xs) 0;
   }
 }
 
 .icon {
   flex: none;
-  width: 3.4rem;
-  height: 3.4rem;
+  width: var(--size-icon-large);
+  height: var(--size-icon-large);
   background: var(--color-goldenBeige);
   border-radius: 100%;
   display: flex;
diff --git a/web/src/components/blocks/imageSliderBlock.module.scss b/web/src/components/blocks/imageSliderBlock.module.scss
index b122825..ac97019 100644
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -3,7 +3,7 @@
   padding-top: 56%;
   background: var(--color-black);
   color: var(--color-goldenBeige);
-  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
 
   figure {
     width: 100%;
@@ -29,7 +29,7 @@
       bottom: 0;
       max-width: var(--size-width-p);
       margin: 0 auto;
-      padding: .75rem 1rem;
+      padding: .75rem var(--spacing-s);
       font-size: var(--font-size-caption);
       line-height: 1.4;
       background: rgba(0, 0, 0, .6);
@@ -41,6 +41,6 @@
   }
 
   &[data-hero] {
-    margin-top: calc(var(--spacing-sitepadding)* -2);
+    margin-top: calc(var(--spacing-sitepadding-block)* -2);
   }
 }
\ No newline at end of file
diff --git a/web/src/components/blocks/imageWithTextBlock.module.scss b/web/src/components/blocks/imageWithTextBlock.module.scss
index f01a36d..2d4f677 100644
--- a/web/src/components/blocks/imageWithTextBlock.module.scss
+++ b/web/src/components/blocks/imageWithTextBlock.module.scss
@@ -12,7 +12,7 @@
     width: 100%;
     max-width: var(--size-width-p);
     margin: 0 auto;
-    padding: 1rem 0;
+    padding: var(--spacing-s) 0;
     font-size: var(--font-size-caption);
     line-height: 1.4;
     opacity: .8;
@@ -20,14 +20,14 @@
 
   &.bleed {
     width: 100vw;
-    margin: 2rem calc(var(--spacing-sitepadding)*-1);
+    margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
 
     img {
       width: 100%;
     }
 
     @media (max-width: 800px) {
-      padding: .5rem var(--spacing-sitepadding);
+      padding: var(--spacing-xs) var(--spacing-sitepadding-inline);
     }
   }
 
diff --git a/web/src/components/blocks/richTextBlock.module.scss b/web/src/components/blocks/richTextBlock.module.scss
index 9b012a4..dc171cc 100644
--- a/web/src/components/blocks/richTextBlock.module.scss
+++ b/web/src/components/blocks/richTextBlock.module.scss
@@ -7,7 +7,7 @@
   h4,
   h5,
   h6 {
-    margin: 2rem auto 1rem;
+    margin: var(--spacing-m) auto var(--spacing-s);
     max-width: var(--size-width-p);
   }
 
diff --git a/web/src/components/blocks/swiper.scss b/web/src/components/blocks/swiper.scss
index 4ec64bf..f465996 100644
--- a/web/src/components/blocks/swiper.scss
+++ b/web/src/components/blocks/swiper.scss
@@ -20,7 +20,7 @@
 .swiper-button-next {
   &:before {
     background-image: url("/assets/icons/circle-arrow-right.svg");
-    right: var(--spacing-sitepadding);
+    right: var(--spacing-sitepadding-inline);
   }
 
   &:after {
@@ -32,7 +32,7 @@
 .swiper-button-prev {
   &:before {
     background-image: url("/assets/icons/circle-arrow-left.svg");
-    left: var(--spacing-sitepadding);
+    left: var(--spacing-sitepadding-inline);
   }
 
   &:after {
@@ -44,8 +44,8 @@
 .swiper-pagination {
   display: inline-block;
   width: auto;
-  margin: var(--spacing-sitepadding);
-  padding: 0 .5rem;
+  margin: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
+  padding: 0 var(--spacing-xs);
   border-radius: 2rem;
   background: rgba(0, 0, 0, 0.6);
   position: absolute;
diff --git a/web/src/components/contact/contactInfo.module.scss b/web/src/components/contact/contactInfo.module.scss
index 0a57197..d6489fe 100644
--- a/web/src/components/contact/contactInfo.module.scss
+++ b/web/src/components/contact/contactInfo.module.scss
@@ -1,6 +1,6 @@
 .contactInfo {
   margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
   background: var(--color-background-secondary);
 
   ul {
diff --git a/web/src/components/events/dateList.module.scss b/web/src/components/events/dateList.module.scss
index a54b87f..f52608a 100644
--- a/web/src/components/events/dateList.module.scss
+++ b/web/src/components/events/dateList.module.scss
@@ -1,9 +1,9 @@
 .dateList {
   list-style: none;
-  margin: 0 calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*2);
-  padding: 0 var(--spacing-sitepadding);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) calc(var(--spacing-sitepadding-block)*2);
+  padding: 0 var(--spacing-sitepadding-inline);
   display: flex;
-  gap: 1rem;
+  gap: var(--spacing-s);
 }
 
 .date {
@@ -12,7 +12,7 @@
   position: relative;
   line-height: 1.2;
   border-right: var(--border);
-  padding-right: 1rem;
+  padding-right: var(--spacing-s);
 
   &:last-child {
     border: none;
diff --git a/web/src/components/events/dateListOld.module.scss b/web/src/components/events/dateListOld.module.scss
index a3d43c1..2ea036c 100644
--- a/web/src/components/events/dateListOld.module.scss
+++ b/web/src/components/events/dateListOld.module.scss
@@ -1,8 +1,8 @@
 .dateList {
   list-style: none;
   background: var(--color-background-secondary);
-  margin: 1rem calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  margin: var(--spacing-s) calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
   display: flex;
   gap: var(--spacing-gap-column);
 }
@@ -10,7 +10,7 @@
 .date {
   font-family: var(--font-serif);
   font-size: var(--font-size-lead);
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
   padding-left: 4rem;
   position: relative;
   min-height: 3.2rem;
diff --git a/web/src/components/events/eventContainer.module.scss b/web/src/components/events/eventContainer.module.scss
index 1eedeea..6576e0c 100644
--- a/web/src/components/events/eventContainer.module.scss
+++ b/web/src/components/events/eventContainer.module.scss
@@ -1,9 +1,9 @@
 .eventWrapper {
-  //margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
+  //margin: calc(var(--spacing-sitepadding-block)*-1) calc(var(--spacing-sitepadding-inline)*-1);
 }
 
 .eventList {
-  padding: var(--spacing-sitepadding) 0;
+  padding: var(--spacing-sitepadding-block) 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
@@ -13,7 +13,7 @@
 
 .displayOptions {
   display: flex;
-  gap: .5rem;
+  gap: var(--spacing-xs);
   align-items: center;
   position: relative;
   z-index: 10;
@@ -33,11 +33,10 @@
 }
 
 .calendarYearMonth {
-  margin-top: var(--spacing-sitepadding);
+  margin-top: var(--spacing-sitepadding-block);
 
   h2 {
     font-size: var(--font-size-lead);
-    //padding: 1rem var(--spacing-sitepadding);
     padding: calc(var(--spacing-gap-column)/2);
     background: var(--color-chateauBlue);
     color: var(--color-betongGray);
@@ -73,19 +72,11 @@
     background: var(--color-background);
   }
 
-  /*&:first-child {
-    padding-left: var(--spacing-sitepadding);
-  }
-
-  &:last-child {
-    padding-right: var(--spacing-sitepadding);
-  }*/
-
   h3 {
     font-family: var(--font-serif);
     font-size: var(--font-size-body);
     font-weight: 400;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
 
 
     &:first-letter {
@@ -106,7 +97,7 @@
   .calendarDay {
 
     min-height: 0;
-    padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
+    padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
 
     &.empty {
       display: none;
@@ -121,7 +112,7 @@
 
     &:first-child,
     &:last-child {
-      padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
+      padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding-inline);
     }
   }
 }
diff --git a/web/src/components/events/eventFilter.module.scss b/web/src/components/events/eventFilter.module.scss
index 69247fb..cd00c44 100644
--- a/web/src/components/events/eventFilter.module.scss
+++ b/web/src/components/events/eventFilter.module.scss
@@ -2,11 +2,11 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows .5s ease;
-  margin: var(--spacing-sitepadding) calc(var(--spacing-sitepadding)*-1) 0;
+  margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
 
   .filterContent {
     background-color: var(--color-background);
-    padding: 1rem var(--spacing-sitepadding);
+    padding: var(--spacing-s) var(--spacing-sitepadding-inline);
     min-height: 0;
     visibility: hidden;
     opacity: 0;
@@ -16,8 +16,8 @@
   .filterItem {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    margin-bottom: 1rem;
+    gap: var(--spacing-s);
+    margin-bottom: var(--spacing-s);
 
 
   }
@@ -26,7 +26,7 @@
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: .5rem;
+    gap: var(--spacing-xs);
   }
 
   button {
diff --git a/web/src/components/events/eventHeader.module.scss b/web/src/components/events/eventHeader.module.scss
index a50ea43..77839eb 100644
--- a/web/src/components/events/eventHeader.module.scss
+++ b/web/src/components/events/eventHeader.module.scss
@@ -4,7 +4,7 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   align-items: flex-end;
-  padding: 0 0 var(--spacing-sitepadding) 0;
+  padding: 0 0 var(--spacing-sitepadding-inline) 0;
 }
 
 .title {
@@ -13,7 +13,7 @@
 
 .image {
   grid-column: span 2;
-  margin-top: calc(var(--spacing-sitepadding)*-2);
+  margin-top: calc(var(--spacing-sitepadding-block)*-2);
 
   img {
     max-width: 100%;
@@ -24,10 +24,10 @@
 .details {}
 
 .prices {
-  margin: 2rem 0 1rem;
+  margin: 2rem 0 var(--spacing-s);
 
   h2 {
-    font-size: 1rem;
+    font-size: var(--spacing-s);
     font-family: var(--font-main);
   }
 }
@@ -41,7 +41,7 @@
   font-family: var(--font-serif);
   font-size: var(--font-size-caption);
   position: relative;
-  padding: 0 1.5rem 0 1rem;
+  padding: 0 1.5rem 0 var(--spacing-s);
 
   &:after {
     content: "/";
diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss
index abf0ad9..9c64292 100644
--- a/web/src/components/events/eventItem.module.scss
+++ b/web/src/components/events/eventItem.module.scss
@@ -6,7 +6,7 @@
 
     .title,
     .details {
-      font-size: 1rem;
+      font-size: var(--font-size-body);
     }
   }
 
@@ -20,7 +20,7 @@
 
     .title,
     .details {
-      font-size: 1rem;
+      font-size: var(--font-size-body);
     }
 
     .image {
diff --git a/web/src/components/events/upcomingEvents.module.scss b/web/src/components/events/upcomingEvents.module.scss
index 9596d54..30b29c2 100644
--- a/web/src/components/events/upcomingEvents.module.scss
+++ b/web/src/components/events/upcomingEvents.module.scss
@@ -1,30 +1,30 @@
 .upcomingWrapper {
   background: var(--color-deepBrick);
   color: var(--color-goldenBeige);
-  margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: 1rem var(--spacing-sitepadding);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline);
   position: relative;
   overflow-x: hidden;
 
   h2 {
-    margin-bottom: .5rem;
+    margin-bottom: var(--spacing-xs);
   }
 }
 
 .eventList {
   --size-item-width: 20rem;
-  padding: 1rem 0;
+  padding: var(--spacing-s) 0;
   list-style: none;
   display: flex;
   width: calc(var(--size-item-width) * 10);
 
   li {
-    padding-right: 1rem;
+    padding-right: var(--spacing-s);
   }
 }
 
 .calendarLink {
-  padding: 1rem var(--spacing-sitepadding);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline);
   text-align: right;
   font-family: var(--font-serif);
   font-style: italic;
diff --git a/web/src/components/general/logo.module.scss b/web/src/components/general/logo.module.scss
index ceaa38d..d8bf1dd 100644
--- a/web/src/components/general/logo.module.scss
+++ b/web/src/components/general/logo.module.scss
@@ -12,7 +12,7 @@
   }
 
   &.main {
-    margin: calc(var(--spacing-sitepadding)*-.6) 0 0 calc(var(--spacing-sitepadding)*-.6);
+    margin: calc(var(--spacing-sitepadding-block)*-.6) 0 0 calc(var(--spacing-sitepadding-inline)*-.6);
   }
 }
 
diff --git a/web/src/components/general/pageHeader.module.scss b/web/src/components/general/pageHeader.module.scss
index 81b8802..2343a22 100644
--- a/web/src/components/general/pageHeader.module.scss
+++ b/web/src/components/general/pageHeader.module.scss
@@ -1,9 +1,9 @@
 .pageHeader {
   position: relative;
-  padding: var(--spacing-l) 0 var(--spacing-sitepadding);
+  padding: var(--spacing-l) 0 var(--spacing-sitepadding-block);
 }
 
 .title {
   font-size: var(--font-size-h1);
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
 }
\ No newline at end of file
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
index 32105dc..8534eac 100644
--- a/web/src/components/layout/footer.module.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index 389de3c..fb8afb0 100644
--- a/web/src/components/layout/header.module.scss
+++ b/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 {
diff --git a/web/src/components/news/newsList.module.scss b/web/src/components/news/newsList.module.scss
index 7315977..2a713a9 100644
--- a/web/src/components/news/newsList.module.scss
+++ b/web/src/components/news/newsList.module.scss
@@ -1,9 +1,9 @@
 .newsWrapper {
-  margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
   }
 }
 
diff --git a/web/src/components/people/personItem.module.scss b/web/src/components/people/personItem.module.scss
index de8e192..82c4998 100644
--- a/web/src/components/people/personItem.module.scss
+++ b/web/src/components/people/personItem.module.scss
@@ -3,7 +3,7 @@
   list-style: none;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--spacing-s);
 }
 
 .image {
@@ -20,7 +20,7 @@
 
 .name,
 .role {
-  font-size: 1rem;
+  font-size: var(--spacing-s);
 }
 
 .role {
@@ -37,7 +37,7 @@
 
 .icon {
   display: inline-block;
-  width: 1rem;
+  width: var(--size-icon);
   text-align: center;
   margin-right: .4rem;
 }
\ No newline at end of file
diff --git a/web/src/components/people/personSection.module.scss b/web/src/components/people/personSection.module.scss
index ae36dc1..0f6540a 100644
--- a/web/src/components/people/personSection.module.scss
+++ b/web/src/components/people/personSection.module.scss
@@ -1,10 +1,10 @@
 .personSection {
   background: var(--color-background-secondary);
-  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
 
   +.personSection {
-    margin-top: calc(var(--spacing-sitepadding)*-2);
+    margin-top: calc(var(--spacing-sitepadding-block)*-2);
   }
 
   &:nth-of-type(even) {
diff --git a/web/src/components/venues/neufMap.module.scss b/web/src/components/venues/neufMap.module.scss
index b9ec3d8..cbdf6e0 100644
--- a/web/src/components/venues/neufMap.module.scss
+++ b/web/src/components/venues/neufMap.module.scss
@@ -1,7 +1,7 @@
 .neufMap {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-sitepadding);
+  gap: var(--spacing-gap-column);
   width: 100%;
   max-width: 1200px;
   margin: var(--spacing-xl) auto;
diff --git a/web/src/components/venues/venueInfo.module.scss b/web/src/components/venues/venueInfo.module.scss
index fb08f2c..d8ef5e5 100644
--- a/web/src/components/venues/venueInfo.module.scss
+++ b/web/src/components/venues/venueInfo.module.scss
@@ -1,11 +1,11 @@
 .venueInfo {
   max-width: var(--size-width-p);
-  margin: 1rem auto 2rem;
+  margin: var(--spacing-s) auto var(--spacing-m);
 
   table {
     width: 100%;
     border-collapse: collapse;
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
   }
 
   tr {
@@ -20,7 +20,7 @@
 
   th,
   td {
-    padding: .5rem 0;
+    padding: var(--spacing-xs) 0;
   }
 
   td {
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 63180c1..76e7fe7 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -35,7 +35,7 @@ body {
 }
 
 .site-main {
-  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) 0;
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) 0;
   min-height: 100vh;
   animation: fadeUp .8s ease-out forwards;
 
@@ -62,14 +62,14 @@ p {
   &.lead {
     font-size: var(--font-size-lead);
     max-width: 34em;
-    margin-bottom: 2.5rem;
+    margin-bottom: var(--spacing-m);
   }
 }
 
 div.lead p {
   font-size: var(--font-size-lead);
   max-width: var(--size-width-p);
-  margin-bottom: 2.5rem;
+  margin-bottom: var(--spacing-m);
 }
 
 h1,
@@ -94,16 +94,16 @@ h6 {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
 
   .circle {
     display: inline-block;
     vertical-align: middle;
-    width: 1rem;
-    height: 1rem;
+    width: var(--size-icon);
+    height: var(--size-icon);
     margin-bottom: .16rem;
-    margin-right: .5rem;
-    border-radius: 1rem;
+    margin-right: var(--spacing-xs);
+    border-radius: var(--size-icon);
     background: var(--color-goldenOrange);
 
     &:last-of-type {
@@ -115,7 +115,7 @@ h6 {
 .breadcrumb {
   display: block;
   font-weight: 500;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-s);
 
   a {
     text-decoration: none;
@@ -138,7 +138,7 @@ input[type="text"] {
   background: var(--color-white);
   color: var(--color-text);
   border: none;
-  padding: .5rem 1rem;
+  padding: var(--spacing-xs) var(--spacing-s);
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
@@ -150,7 +150,7 @@ select {
   background: var(--color-white);
   color: var(--color-text);
   border: 2px solid currentColor;
-  padding: .5rem 1rem;
+  padding: var(--spacing-xs) var(--spacing-s);
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
@@ -204,14 +204,14 @@ select {
 
   >span {
     display: block;
-    margin-bottom: .5rem;
+    margin-bottom: var(--spacing-xs);
   }
 
   ul {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: .5rem;
+    gap: var(--spacing-xs);
   }
 
   a {
@@ -223,11 +223,11 @@ select {
 
 .pageSection {
   background: var(--color-neufPink);
-  margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
 
   +.pageSection {
-    margin-top: calc(var(--spacing-sitepadding)*-2);
+    margin-top: calc(var(--spacing-sitepadding-block)*-2);
   }
 
   &:nth-of-type(even) {
@@ -255,11 +255,11 @@ select {
   }
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
   }
 
   h3 {
-    margin: 1rem 0;
+    margin: var(--spacing-s) 0;
   }
 }
 
@@ -275,7 +275,7 @@ select {
     padding: .25em 0;
 
     &:first-child {
-      padding-right: 1rem;
+      padding-right: var(--spacing-s);
     }
   }
 }
@@ -289,8 +289,8 @@ select {
 
 .infoBlock {
   background: var(--color-goldenBeige);
-  margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline) var(--spacing-section-bottom);
   position: relative;
   overflow: hidden;
 
@@ -300,15 +300,15 @@ select {
   min-height: 16rem;
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: var(--spacing-s);
   }
 
   p {
-    margin-bottom: 2rem;
+    margin-bottom: var(--spacing-m);
   }
 
   .button {
-    margin-right: .5rem;
+    margin-right: var(--spacing-xs);
   }
 
   .pig {
diff --git a/web/src/css/button.scss b/web/src/css/button.scss
index 3cfe62c..ebda602 100644
--- a/web/src/css/button.scss
+++ b/web/src/css/button.scss
@@ -2,13 +2,13 @@ button,
 .button {
   display: inline-flex;
   align-items: center;
-  gap: 1rem;
+  gap: var(--spacing-s);
   border-radius: 10rem;
   background: var(--color-cta-background);
   color: var(--color-cta-text);
   border: none;
-  padding: .5rem 1rem;
-  margin: 0 0 .5rem;
+  padding: var(--spacing-xs) var(--spacing-s);
+  margin: 0 0 var(--spacing-xs);
   font-family: var(--font-main);
   font-size: var(--font-size-body);
   font-weight: 500;
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index 19b26fa..d6b34f2 100644
--- a/web/src/css/variables.scss
+++ b/web/src/css/variables.scss
@@ -44,9 +44,13 @@
   --color-menu-background: var(--color-goldenBeige);
 
   // spacing
-  --spacing-sitepadding: 2rem;
-  --spacing-gap-column: 2rem;
-  --spacing-gap-row: 1.5rem;
+  --spacing-sitepadding-block: 2rem;
+  --spacing-sitepadding-inline: 2rem;
+  --spacing-gap-column: var(--spacing-sitepadding-block);
+  --spacing-gap-row: calc(var(--spacing-gap-column)*-.25);
+  --spacing-xs: .5rem;
+  --spacing-s: 1rem;
+  --spacing-m: 2rem;
   --spacing-l: 3rem;
   --spacing-xl: 6rem;
   --spacing-section-bottom: var(--spacing-l);
@@ -54,10 +58,26 @@
   // sizes
   --size-width-p: 36rem;
   --size-icon: 1em;
+  --size-icon-circle: 3rem;
+  --size-icon-large: 3.4rem;
 
   // animations
   --transition-easing: .3s ease;
 
   --border: 1px solid var(--color-neufPink);
   --border-s: 1px solid var(--color-chateauBlue-05);
+}
+
+@media (min-width: 1400px) {
+  :root {
+    --spacing-sitepadding-block: 2.5rem;
+    --spacing-sitepadding-inline: 6rem;
+  }
+}
+
+@media (min-width: 1920px) {
+  :root {
+    --spacing-sitepadding-block: 3rem;
+    --spacing-sitepadding-inline: 10rem;
+  }
 }
\ No newline at end of file