diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 35d8dfa..3b7b888 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -106,7 +106,7 @@ body {
   grid-column: main-start / main-end;
 }
 
-.content > :is(.figure--image, .codeblock) {
+.content > .codeblock) {
   grid-column: wide-gutter-start / wide-gutter-end;
 }
 
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 822c4e6..41691e5 100644
--- a/assets/css/050_figures.css
+++ b/assets/css/050_figures.css
@@ -12,16 +12,7 @@
   display: grid;
   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;
-  }
-
-  &:has(> img:only-child, .figure__container > img:only-child) {
+  &:has(> img:only-child, .figure__container:only-child > img:only-child) {
     display: flex;
     justify-content: center;
   }
@@ -46,6 +37,26 @@
 }
 
 
+.figure--image img,
+.figure--video video
+{
+  grid-column: wide-gutter-start / wide-gutter-end;
+}
+
+
+.figure--small {
+  align-items: center;
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  min-width: fit-content;
+
+  img {
+    width: 480px;
+  }
+}
+
+
 .figure--main-column {
   grid-column: main-start / main-end;
 }
@@ -56,6 +67,11 @@
 }
 
 
+.figure--video video {
+  width: 100%;
+}
+
+
 .figure--youtube {
   grid-column: wide-gutter-start / wide-gutter-end;
 
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 5d80a99..01d4a5f 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -5,10 +5,15 @@ draftYes: "YES"
 draftNo: "NO"
 
 home: Home
-tableOfContents: Table of Contents
+
+instagram: Instagram
 
 # Title of section of a list page where years older than
 # .Site.Params.blog.yearLimit are collapsed into a bulleted list.
 olderPagesSectionTitle: Older
 
+source: Source
+
+tableOfContents: Table of Contents
+
 yearsTagTitle: Years
diff --git a/layouts/partials/page/figures/caption.html b/layouts/partials/page/figures/caption.html
new file mode 100644
index 0000000..f3ccf29
--- /dev/null
+++ b/layouts/partials/page/figures/caption.html
@@ -0,0 +1,6 @@
+<figcaption>
+  {{ .resource.Title | markdownify }}
+  {{ with .resource.Params.source -}}
+    {{ partial "page/figures/resource-source.html" . }}
+  {{- end -}}
+</figcaption>
diff --git a/layouts/partials/page/figures/fullwidth-image.html b/layouts/partials/page/figures/fullwidth-image.html
new file mode 100644
index 0000000..da98420
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-image.html
@@ -0,0 +1,30 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "full"    ($image.Fit "2560x2560")
+    "half"    ($image.Fit "1280x1280")
+    "quarter" ($image.Fit "640x640")
+-}}
+
+<figure class="figure  figure--image
+  {{- if eq .size "main" }}figure--main-column{{ end }}">
+  {{ if .linksToFullSizeImage -}}
+    <a href="{{ $image.RelPermalink }}">
+  {{- end -}}
+    <img
+      src="{{ (index $resizedImages "full").RelPermalink }}"
+      srcset="
+        {{ (index $resizedImages "full").RelPermalink }} 2560w,
+        {{ (index $resizedImages "half").RelPermalink }} 1280w,
+        {{ (index $resizedImages "quarter").RelPermalink }} 640w,
+      "
+      {{ 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>
diff --git a/layouts/partials/page/figures/fullwidth-video.html b/layouts/partials/page/figures/fullwidth-video.html
new file mode 100644
index 0000000..017f4a5
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth-video.html
@@ -0,0 +1,10 @@
+{{- $video := .resource -}}
+
+<figure class="figure  figure--video">
+  <video controls>
+    <source src="{{ $video.RelPermalink }}" type="{{ $video.MediaType.Type }}">
+  </video>
+  {{ if .shouldShowTitle }}
+    {{ partial "page/figures/caption.html" . }}
+  {{ end }}
+</figure>
diff --git a/layouts/partials/page/figures/fullwidth.html b/layouts/partials/page/figures/fullwidth.html
new file mode 100644
index 0000000..282f180
--- /dev/null
+++ b/layouts/partials/page/figures/fullwidth.html
@@ -0,0 +1,14 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/fullwidth-image.html" (merge . (dict "resource" $resource))  }}
+{{- else if eq $resource.ResourceType "video" -}}
+  {{ partial "page/figures/fullwidth-video.html" (merge . (dict "resource" $resource)) }}
+{{- end -}}
diff --git a/layouts/partials/page/figures/resource-source.html b/layouts/partials/page/figures/resource-source.html
new file mode 100644
index 0000000..ca992c6
--- /dev/null
+++ b/layouts/partials/page/figures/resource-source.html
@@ -0,0 +1,19 @@
+<span class="figure__source">
+  {{ if and .title .url }}
+    {{ i18n "source" }}: <a href="{{ .url }}">{{ .title }}</a>.
+  {{ else if .title }}
+    {{ .title }}
+  {{ else }}
+    {{ $sourceTitle := "" }}
+    {{ $parsedURL := urls.Parse .url }}
+    {{ if strings.Contains $parsedURL.Hostname "instagram.com" }}
+      {{ $sourceTitle = i18n "instagram" }}
+    {{ end }}
+
+    {{ if gt (len $sourceTitle) 0 }}
+      {{ i18n "source" }}: <a href="{{ .url }}">{{ $sourceTitle }}</a>
+    {{ else }}
+      <a href="{{ .url }}">{{ i18n "source" }}</a>
+    {{ end }}
+  {{ end }}
+</span>
diff --git a/layouts/partials/page/figures/small-image.html b/layouts/partials/page/figures/small-image.html
new file mode 100644
index 0000000..2166fcf
--- /dev/null
+++ b/layouts/partials/page/figures/small-image.html
@@ -0,0 +1,29 @@
+{{- $image := .resource -}}
+
+{{-
+  $resizedImages := dict
+    "2x" ($image.Fit "960x960")
+    "1x" ($image.Fit "480x480")
+-}}
+
+<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>
+</figure>
diff --git a/layouts/partials/page/figures/small.html b/layouts/partials/page/figures/small.html
new file mode 100644
index 0000000..6b39a92
--- /dev/null
+++ b/layouts/partials/page/figures/small.html
@@ -0,0 +1,12 @@
+{{- $page := .page -}}
+
+{{- $shouldShowTitle := .shouldShowTitle -}}
+
+{{- $resource := $page.Resources.GetMatch .name -}}
+{{- if not $resource }}
+  {{ errorf "No resource named '%s'. %s" .name .page.Permalink }}
+{{ end -}}
+
+{{- if eq $resource.ResourceType "image" -}}
+  {{ partial "page/figures/small-image.html" (merge . (dict "resource" $resource))  }}
+{{- end -}}