misc design progress, more variables, news and event lists, remove old date list, etc

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-block)*2) calc(var(--spacing-sitepaddign-inline)*-1);
+  margin: calc(var(--spacing-sitepadding-block)*2) calc(var(--spacing-sitepadding-inline)*-1);
 
   figure {
     width: 100%;

web/src/components/blocks/pageSection.module.scss

@@ -1,8 +1,12 @@
 .pageSection {
-  margin: 5rem auto;
-  padding: 2rem 0;
+  margin: var(--spacing-m) auto;
+  padding: var(--spacing-m) 0;
   border-top: var(--border-s);
 
+  &:nth-of-type(1) {
+    margin-top: var(--spacing-l);
+  }
+
   &:nth-of-type(3n+1) {
     .icon {
       background: var(--color-neufPink);
@@ -23,12 +27,15 @@
 }
 
 .sectionHeader {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
   align-items: center;
   gap: 1.6rem;
+  margin-bottom: var(--spacing-section-bottom);
 
-  h1 {
+  h2 {
     font-size: var(--font-size-h2);
+    grid-column: span 11;
   }
 }
 

web/src/components/blocks/richTextBlock.module.scss

@@ -1,5 +1,25 @@
 .richTextBlock {
   padding-bottom: var(--spacing-section-bottom);
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--spacing-gap-column);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  blockquote {
+    grid-column: 2 / span 10;
+
+    @media (max-width: 1200px) {
+      grid-column: 1 / -1;
+    }
+  }
 
   h1,
   h2,
@@ -7,7 +27,7 @@
   h4,
   h5,
   h6 {
-    margin: var(--spacing-m) auto var(--spacing-s);
+    margin: var(--spacing-m) 0 var(--spacing-s);
     max-width: var(--size-width-p);
   }
 
@@ -18,14 +38,14 @@
   }
 
   p {
-    margin: 0 auto 1.4em;
+    margin: 0 0 1.4em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
   }
 
   ul,
   ol {
-    margin: 1em auto 2em;
+    margin: 1em 0 2em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
     list-style: none;
@@ -80,7 +100,7 @@
     font-size: 2.8rem;
     font-style: italic;
     max-width: calc(var(--size-width-p) * 1.4);
-    margin: 2rem auto 3.2rem;
+    margin: 2rem 0 3.2rem;
     text-align: center;
   }
 
@@ -118,7 +138,7 @@
   }
 
   hr {
-    margin: 2rem auto;
+    margin: 2rem 0;
     max-width: var(--size-width-p);
     border: none;
     height: 1px;

web/src/components/blocks/swiper.scss

@@ -11,13 +11,15 @@
     content: "";
     display: block;
     position: absolute;
-    width: 3rem;
-    height: 3rem;
+    width: var(--size-icon-circle);
+    height: var(--size-icon-circle);
     background-size: 100%;
   }
 }
 
 .swiper-button-next {
+  right: 0;
+
   &:before {
     background-image: url("/assets/icons/circle-arrow-right.svg");
     right: var(--spacing-sitepadding-inline);
@@ -30,6 +32,8 @@
 }
 
 .swiper-button-prev {
+  left: 0;
+
   &:before {
     background-image: url("/assets/icons/circle-arrow-left.svg");
     left: var(--spacing-sitepadding-inline);