wrap and size fact box

web/src/components/blocks/FactBoxBlock.tsx

@@ -12,14 +12,13 @@ export const FactBoxBlock = ({ block }: { block: FactBoxBlockTypeWithAlias }) =>
     return <></>;
   }
   return (
-    <section
+    <section className={styles.factBoxWrapper}>
-      className={styles.factBox}
+      <div className={styles.factBox} data-background-color={block.backgroundColor ?? ""}>
-      data-background-color={block.backgroundColor ?? ""}
+        <div
-    >
+          className={styles.factBoxContent}
-      <div
+          dangerouslySetInnerHTML={{ __html: block.factBoxBody }}
-        className={styles.factBoxContent}
+        />
-        dangerouslySetInnerHTML={{ __html: block.factBoxBody }}
+      </div>
-      />
     </section>
   );
 };

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

@@ -1,6 +1,10 @@
+.factBoxWrapper {
+  max-width: var(--size-width-p);
+  margin: 0 auto;
+}
+
 .factBox {
   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);
@@ -37,5 +41,9 @@
 }
 
 .factBoxContent {
-
+  ul,
+  ol {
+    margin: 1em auto 2em;
+    padding-left: var(--spacing-s);
+  }
 }

web/src/css/base.scss

@@ -53,7 +53,6 @@ a {
 }
 
 p {
-  font-size: var(--font-size-body);
   max-width: var(--size-width-p);
 
   &.lead {