start styling fact box, center rich text content

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

@@ -1,7 +1,9 @@
 .factBox {
-  /* TODO: default fact box color if none is chosen
   background: var(--color-background-secondary);
-  */
+  max-width: var(--size-width-p);
+  margin: 0 calc(var(--spacing-s) * -1);
+  padding: var(--spacing-s);
+  font-size: var(--font-size-caption);
 
   &[data-background-color="betongGray"] {
     background-color: var(--color-betongGray);

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

@@ -1,25 +1,5 @@
 .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,
@@ -27,7 +7,7 @@
   h4,
   h5,
   h6 {
-    margin: var(--spacing-m) 0 var(--spacing-s);
+    margin: var(--spacing-m) auto var(--spacing-s);
     max-width: var(--size-width-p);
   }
 
@@ -38,14 +18,14 @@
   }
 
   p {
-    margin: 0 0 1.4em;
+    margin: 0 auto 1.4em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
   }
 
   ul,
   ol {
-    margin: 1em 0 2em;
+    margin: 1em auto 2em;
     font-size: var(--font-size-body);
     max-width: var(--size-width-p);
     list-style: none;
@@ -100,7 +80,7 @@
     font-size: 2.8rem;
     font-style: italic;
     max-width: calc(var(--size-width-p) * 1.4);
-    margin: 2rem 0 3.2rem;
+    margin: 2rem auto 3.2rem;
   }
 
   strong,