use body styles for rich text block and separate component

web/src/components/blocks/Blocks.tsx

@@ -1,11 +1,4 @@
-export const RichTextBlock = ({ block }: any) => {
-  return (
-    <div
-      className="rich-text-block"
-      dangerouslySetInnerHTML={{ __html: block.value }}
-    ></div>
-  );
-};
+import { RichTextBlock } from "./RichTextBlock";
 
 export const Blocks = ({ blocks }: any) => {
   return blocks.map((block: any) => {

web/src/components/blocks/RichTextBlock.tsx

@@ -0,0 +1,10 @@
+import styles from "./richTextBlock.module.scss";
+
+export const RichTextBlock = ({ block }: any) => {
+  return (
+    <div
+      className={styles.richTextBlock}
+      dangerouslySetInnerHTML={{ __html: block.value }}
+    ></div>
+  );
+};

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

@@ -0,0 +1,110 @@
+.richTextBlock {
+  padding-bottom: var(--spacing-section-bottom);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 2rem 0 1rem;
+    max-width: 36em;
+  }
+
+  h5,
+  h6 {
+    text-transform: uppercase;
+    letter-spacing: .04em;
+  }
+
+  p {
+    margin-bottom: 1.4em;
+    font-size: var(--font-size-body);
+    max-width: 36em;
+  }
+
+  ul,
+  ol {
+    margin: 1em 0 2em;
+    font-size: var(--font-size-body);
+    max-width: 36em;
+    list-style: none;
+
+    li {
+      position: relative;
+      margin-bottom: .75em;
+      padding-left: 2em;
+
+      &:before {
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+
+  ul {
+    li {
+      &:before {
+        content: "";
+        left: .35em;
+        top: .4em;
+        display: block;
+        width: .75em;
+        height: .75em;
+        border-radius: 1em;
+        background: var(--color-goldenOrange);
+      }
+    }
+  }
+
+  ol {
+    counter-reset: counter;
+
+    li {
+      &:before {
+        counter-increment: counter;
+        content: counter(counter);
+        font-weight: 500;
+        color: var(--color-chateauBlue);
+        border-radius: 1em;
+        background: var(--color-neufPink);
+        width: 1.5em;
+        height: 1.5em;
+        text-align: center;
+      }
+    }
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    text-decoration-thickness: .1rem;
+    text-decoration-color: var(--color-goldenOrange);
+    font-weight: 500;
+    transition: text-decoration-color var(--transition-easing);
+
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  figure {
+    margin: 2rem 0 2.4rem;
+  }
+
+  figcaption {
+    font-size: var(--font-size-caption);
+    padding: .6rem 0;
+    max-width: 36rem;
+  }
+}