A {{ 2col }} shortcode and styling to make a 2 column grid

If the shortcode contains only figures, lay it out wide and add XL margins like
other figures.

assets/css/010_spacing.css

@@ -71,6 +71,7 @@ hr {
       ".figure"
       ".highlight"
       ".instagram-media"
+      ".two-column:has(figure:first-child + figure:last-child)"
     )
   ", "
 -}}

assets/css/010_structure.css

@@ -138,3 +138,34 @@ section.content--small-right-column {
     margin-block: 0;
   }
 }
+
+
+
+
+
+/*********************
+ * 2 COLUMN CONTAINER
+ *********************/
+
+main.content > .two-column {
+  display: grid;
+  grid-column: main-start / main-end;
+  grid-template-columns: 1fr 1fr;
+
+  &.wide {
+    grid-column: wide-gutter-start / wide-gutter-end;
+  }
+
+  > :first-child {
+    grid-column: unset;
+  }
+
+  > :last-child {
+    grid-column: unset;
+  }
+
+  &:has(figure:first-child + figure:last-child) {
+    gap: var(--space-xs);
+    grid-column: wide-gutter-start / wide-gutter-end;
+  }
+}

layouts/shortcodes/2col.html

@@ -0,0 +1,10 @@
+{{- $size := .Get 0 | default "main" -}}
+
+{{- $classes := slice "two-column" -}}
+{{- if eq $size "wide" -}}
+  {{- $classes = $classes | append "wide" -}}
+{{- end -}}
+
+<div class="{{ delimit $classes "  " }}">
+  {{ .Inner }}
+</div>