diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 40a7ed2..9680333 100644
--- a/assets/css/010_spacing.css
+++ b/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"
     )
diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 3b7b888..f4cac11 100644
--- a/assets/css/010_structure.css
+++ b/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;
 }
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 41691e5..a426a63 100644
--- a/assets/css/050_figures.css
+++ b/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%;
 }
 
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
index da98420..ed39f0e 100644
--- a/layouts/partials/page/figures/fullwidth-image.html
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -7,8 +7,12 @@
     "quarter" ($image.Fit "640x640")
 -}}
 
-<figure class="figure  figure--image
-  {{- if eq .size "main" }}figure--main-column{{ end }}">
+{{- $classes := slice "figure" "figure--image" -}}
+{{- if eq .size "main" -}}
+  {{ $classes = $classes | append "figure--main-column" }}
+{{- end -}}
+
+<figure class="{{ delimit $classes "  " }}">
   {{ if .linksToFullSizeImage -}}
     <a href="{{ $image.RelPermalink }}">
   {{- end -}}
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
index 282f180..d10d467 100644
--- a/layouts/partials/page/figures/fullwidth.html
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -1,8 +1,4 @@
-{{- $page := .page -}}
-
-{{- $shouldShowTitle := .shouldShowTitle -}}
-
-{{- $resource := $page.Resources.GetMatch .name -}}
+{{- $resource := .page.Resources.GetMatch .name -}}
 {{- if not $resource }}
   {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
 {{ end -}}
diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html
index 2166fcf..7dd7cf5 100644
--- a/layouts/partials/page/figures/small-image.html
+++ b/layouts/partials/page/figures/small-image.html
@@ -7,23 +7,21 @@
 -}}
 
 <figure class="figure  figure--image  figure--small">
-  <div class="figure__container">
-    {{ if .linksToFullSizeImage -}}
-      <a href="{{ $image.RelPermalink }}">
-    {{- end -}}
-      <img
-        src="{{ (index $resizedImages "2x").RelPermalink }}"
-        srcset="
-          {{ (index $resizedImages "2x").RelPermalink }} 960w,
-          {{ (index $resizedImages "1x").RelPermalink }} 480w,
-        "
-        {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
-        {{ with $image.Title }} title="{{ . }}"{{ end }}>
-    {{ if .linksToFullSizeImage -}}
-      </a>
-    {{- end -}}
-    {{ if .shouldShowTitle }}
-      {{ partial "page/figures/caption.html" . }}
-    {{ end }}
-  </div>
+  {{ if .linksToFullSizeImage -}}
+    <a href="{{ $image.RelPermalink }}">
+  {{- end -}}
+    <img
+      src="{{ (index $resizedImages "2x").RelPermalink }}"
+      srcset="
+        {{ (index $resizedImages "2x").RelPermalink }} 960w,
+        {{ (index $resizedImages "1x").RelPermalink }} 480w,
+      "
+      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
+      {{ with $image.Title }} title="{{ . }}"{{ end }}>
+  {{ if .linksToFullSizeImage -}}
+    </a>
+  {{- end -}}
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
 </figure>