diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 3b733f5..d8b6452 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -71,6 +71,7 @@ hr {
       ".figure"
       ".highlight"
       ".instagram-media"
+      ".two-column:has(figure:first-child + figure:last-child)"
     )
   ", "
 -}}
diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index f4cac11..8244e46 100644
--- a/assets/css/010_structure.css
+++ b/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;
+  }
+}
diff --git a/layouts/shortcodes/2col.html b/layouts/shortcodes/2col.html
new file mode 100644
index 0000000..c491714
--- /dev/null
+++ b/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>