Move all the figure styles to columns and typography

assets/styles/root/002_columns.css

@@ -106,6 +106,23 @@
     padding-top: calc(var(--body-item-spacing) / 10);
   }
 
+  figcaption:not(:empty) {
+    margin-block-start: 0.2em;
+  }
+
+  figure {
+    grid-column: gutter-start / gutter-end;
+    margin: 0;
+    margin-inline: 0;
+    min-width: fit-content;
+    overflow: hidden;
+  }
+  @media (max-width: 415px) {
+    figure {
+      grid-column: wide-content-start / wide-content-end;
+    }
+  }
+
   figure.code .line > .ln {
     grid-column: gutter-start;
   }
@@ -114,6 +131,34 @@
     grid-column: content-start / content-end;
   }
 
+  figure > .container {
+    align-items: center;
+    display: flex;
+    gap: var(--body-item-spacing);
+    justify-content: center;
+    min-width: fit-content;
+  }
+
+  figure img {
+    display: block;
+  }
+  @media (max-width: 414px) {
+    figure img {
+      max-width: 100%;
+    }
+  }
+
+  figure svg {
+    width: 100%;
+    height: auto;
+  }
+
+  figure .youtube {
+    overflow: hidden;
+    max-width: var(--content-width);
+    width: 100%;
+  }
+
   img {
     height: auto;
     max-width: 100%;
@@ -175,7 +220,7 @@
     margin-inline-start: 0;
     margin-block-start: calc(var(--body-item-spacing) / 2);
   }
-  
+
   table {
     border-collapse: collapse;
     margin-inline: auto;
@@ -239,6 +284,12 @@
     }
   }
 
+  .p5-sketch {
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
   .page {
     gap: var(--body-item-spacing) 0;
   }
@@ -266,7 +317,7 @@
     grid-column: gutter-start / gutter-end;
   }
 
-  .page > :not(blockquote, figure.code, :has(> img)) {
+  .page > :not(blockquote, figure, :has(> img)) {
     grid-column: content-start / content-end;
   }
 
@@ -283,4 +334,10 @@
   .post .title {
     grid-column: content-start / content-end;
   }
+
+  .youtube iframe {
+    aspect-ratio: 16 / 9;
+    margin-bottom: -3px;
+    width: 100%;
+  }
 }

assets/styles/root/050_figures.css

@@ -1,75 +0,0 @@
-@layer root {
-    figcaption {
-        text-align: center;
-    }
-
-    figcaption:not(:empty) {
-        margin-block-start: 0.2em;
-    }
-
-    figure {
-        grid-column: gutter-start / gutter-end;
-        margin: 0;
-        margin-inline: 0;
-        min-width: fit-content;
-        overflow: hidden;
-    }
-
-    @media (max-width: 415px) {
-      figure {
-        grid-column: wide-content-start / wide-content-end;
-      }
-    }
-
-    figure > .container {
-        align-items: center;
-        display: flex;
-        gap: var(--body-item-spacing);
-        justify-content: center;
-        min-width: fit-content;
-    }
-
-    figure.bordered {
-        padding: 0.5rem;
-        border: 2px solid #eee;
-    }
-
-    figure a,
-    figure a:hover {
-        border: 0;
-    }
-
-    figure img {
-        display: block;
-        height: auto;
-    }
-
-    @media (max-width: 414px) {
-        figure img {
-            max-width: 100%;
-        }
-    }
-
-    figure svg {
-        width: 100%;
-        height: auto;
-    }
-
-    figure .youtube {
-        overflow: hidden;
-        max-width: var(--content-width);
-        width: 100%;
-    }
-
-    .p5-sketch {
-        display: block;
-        position: relative;
-        width: 100%;
-    }
-
-    .youtube iframe {
-        aspect-ratio: 16 / 9;
-        margin-bottom: -3px;
-        width: 100%;
-    }
-}

assets/styles/root/050_typography.css

@@ -56,6 +56,7 @@
     figcaption {
         font-size: 80%;
         line-height: var(--line-height);
+        text-align: center;
     }
 
     figure .highlight .cl {