<IFrame /> component

components/Figure/Figure.module.css

@@ -0,0 +1,15 @@
+.figure {
+  margin: 1em auto;
+  text-align: center;
+}
+
+.caption {
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--medium);
+}
+
+/* some figcaptions contain paragraphs, some don't, so reset all of them */
+.caption p {
+  margin: 0;
+}

components/Figure/Figure.tsx

@@ -3,6 +3,8 @@ import innerText from "react-innertext";
 import type { ReactNode } from "react";
 import type { ImageProps as NextImageProps } from "next/image";
 
+import styles from "./Figure.module.css";
+
 type Props = Omit<NextImageProps, "alt"> & {
   children: ReactNode; // caption (can be in markdown, yay!!!)
   alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
@@ -10,9 +12,9 @@ type Props = Omit<NextImageProps, "alt"> & {
 
 const Figure = ({ children, alt, ...imageProps }: Props) => {
   return (
-    <figure>
+    <figure className={styles.figure}>
       <Image alt={alt || innerText(children)} {...imageProps} />
-      <figcaption>{children}</figcaption>
+      <figcaption className={styles.caption}>{children}</figcaption>
     </figure>
   );
 };