Add some styles for code and image figures

These elements are created with the figures/image shortcodes from the old site.
Make them wide, and give them XL block margins.

Along the way, make sure that any element with only an <img> child has a line height
of 1 to avoid a weird gap below the image.

assets/css/010_spacing.css

@@ -61,7 +61,7 @@ p + p {
 
 /* Figures */
 
-{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .figure--youtube, .codeblock, .highlight, table" -}}
+{{- $elementsWithXLBlockMargins := "blockquote, .figure--code, .figure--image, .figure--youtube, .codeblock, .highlight, table" -}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);

assets/css/010_typography.css

@@ -84,10 +84,6 @@ h4 {
 
 p {
   letter-spacing: 0.01em;
-
-  :has(img:only-child) {
-    line-height: 1;
-  }
 }
 
 sup {
@@ -113,3 +109,7 @@ small,
   font-size: var(--text-s);
   letter-spacing: 0.01em;
 }
+
+:has(> img:only-child) {
+  line-height: 1;
+}

assets/css/050_figures.css

@@ -7,11 +7,24 @@
  * FIGURES
  **********/
 
+.figure--code,
+.figure--image {
+  grid-column: wide-gutter-start / wide-gutter-end;
+}
+
 .figure--image {
     display: grid;
-    grid-column: wide-gutter-start / wide-gutter-end;
     grid-template-columns: subgrid;
 
+    .figure__container {
+      align-items: center;
+      display: flex;
+      gap: var(--body-item-spacing);
+      grid-column: wide-gutter-start / wide-gutter-end;
+      justify-content: center;
+      min-width: fit-content;
+    }
+
     img {
         grid-column: wide-gutter-start / wide-gutter-end;
     }