Simplify figure styles and markup

Remove the .figure__container element. According to Tess, putting a <figcaption>
inside a child of a <figure> "doesn't obey the content model" or some shit.
Fiiiiine.

Getting small figures to lay out the way I want them to without the container
was a bit of a trick. Instead of letting the figure span the entire width of the
grid column, let it fit the size of its contents, and then set margin-inline to
auto so it centers.

Doing this also allowed me to remove the .figure--image, etc styles because the
styles and markup are a lot more similar among figures containing different
kinds of elements. Nice!

assets/css/010_spacing.css

@@ -68,11 +68,6 @@ hr {
       "table"
       ".codeblock"
       ".figure"
-      ".figure--main-column"
-      ".figure--code"
-      ".figure--image"
-      ".figure--video"
-      ".figure--youtube"
       ".highlight"
       ".instagram-media"
     )

assets/css/010_structure.css

@@ -98,7 +98,7 @@ body {
   gap: var(--space-xl) 0;
 }
 
-:is(.list-header, p) {
+.list-header, p {
   grid-column: main-start / main-end;
 }
 
@@ -110,10 +110,6 @@ body {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
-figure, img {
-  max-width: 100%;
-}
-
 img {
   object-fit: contain;
 }

assets/css/050_figures.css

@@ -9,10 +9,22 @@
 
 .figure {
   grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+.figure--main-column {
+  grid-column: main-start / main-end;
+}
+
+.figure--code {
+  grid-column: gutter-start / gutter-end;
+}
+
+
+.figure {
   display: grid;
   grid-template-columns: subgrid;
 
-  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
+  &:has(> img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -37,37 +49,24 @@
 }
 
 
-.figure--image img,
-.figure--video video
-{
+.figure :is(img, video) {
   grid-column: wide-gutter-start / wide-gutter-end;
+  width: 100%;
 }
 
 
 .figure--small {
-  align-items: center;
-  display: flex;
-  grid-column: main-start / main-end;
-  justify-content: center;
-  min-width: fit-content;
+  display: flow;
+  margin-inline: auto;
 
   img {
+    max-width: 100%;
     width: 480px;
   }
 }
 
 
-.figure--main-column {
-  grid-column: main-start / main-end;
-}
-
-
-.figure--code {
-  grid-column: gutter-start / gutter-end;
-}
-
-
-.figure--video video {
+.figure video {
   width: 100%;
 }