Redo the figure shortcode to take multiple images

Put all images in a flexbox container

assets/styles/root/050_figures.css

@@ -10,7 +10,13 @@
         margin-inline: 0;
         overflow: hidden;
         max-width: var(--content-width);
-        width: 100%;
+    }
+
+    figure > .container {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        gap: var(--body-item-spacing);
     }
 
     figure.bordered {
@@ -28,7 +34,6 @@
         border-radius: 6px;
         height: auto;
         max-width: var(--content-width);
-        width: 100%;
     }
 
     figure svg {

layouts/shortcodes/figures/image.html

@@ -1,11 +1,36 @@
-{{- $img := (.Page.Resources.GetMatch (.Get "name")) -}}
+{{- $imgs := slice -}}
-{{- $resized_img := $img.Fit "1280x1280" -}}
+
-{{- $altText := $img.Params.alt | default $img.Title -}}
+{{- if .Get "name" -}}
+  {{- $imgs = $imgs | append (.Page.Resources.GetMatch (.Get "name")) -}}
+{{- else if .Get "names" -}}
+  {{- range (split (.Get "names") ",") -}}
+    {{- $imgs = $imgs | append ($.Page.Resources.GetMatch .) -}} 
+  {{- end -}}
+{{- else -}}
+  {{ errorf "Missing name or names parameter to figures/image" }}
+{{- end -}}
+
+{{- if lt (len $imgs) 0 -}}
+  {{ errorf "No images found for name(s) parameter" }}
+{{- end -}}
+
+{{- $shouldShowTitle := (.Get "shouldShowTitle") | default true -}}
+
 <figure>
+  <div class=container>
+    {{ range $img := $imgs -}}
+      {{- $resizedImg := $img.Fit "1280x1280" -}}
+      {{- $altText := $img.Params.alt | default $img.Title -}}
       <a href="{{ $img.RelPermalink }}">
-      <img src="{{ $resized_img.RelPermalink }}"{{ with $altText}} alt="{{ . }}"{{ end }}>
+        <img src="{{ $resizedImg.RelPermalink }}"
+          {{- with $altText }} alt="{{ . }}"{{- end }}
+          {{- with $img.Title }} title="{{ . }}"{{- end }}>
       </a>
-  {{ if $img.Title }}
+    {{- end }}
-  <figcaption>{{ $img.Title }}</figcaption>
+  </div>
-  {{ end }}
+  {{ if and $shouldShowTitle -}}
+    {{- range $imgs -}}
+      <figcaption>{{ .Title }}</figcaption>
+    {{- end -}}
+  {{- end }}
 </figure>