ui: rework the double-img helper to make it usable

modeled off of the excellent work by jonas on https://www.jonashietala.se/

Author: ayunker

_includes/double-img.html

@@ -1,15 +1,12 @@
-<div>
-  <a href="{{ include.src1 }}">
-    <img
-      src="{{ include.src1 }}"
-      class="inline-img"
-    />
-  </a>
+<div style="display:grid">
+  <figure class="inline-img-container">
+    <a class="inline-img-link" href="{{ include.src1 }}">
+      <img src="{{ include.src1 }}" />
+    </a>
 
-  <a href="{{ include.src2 }}">
-    <img
-      src="{{ include.src2 }}"
-      class="inline-img"
-    />
-  </a>
+    <a class="inline-img-link" href="{{ include.src2 }}">
+      <img src="{{ include.src2 }}" />
+    </a>
+    <figcaption>{{ include.caption }}</figcaption>
+  </figure>
 </div>

_sass/base.scss

@@ -97,10 +97,12 @@ figure {
 }
 
 figcaption {
+  width: 100%;
   font-size: 0.9rem;
   color: var(--text-light);
   text-align: center;
   margin-bottom: 1rem;
+  font-style: italic;
 }
 
 pre {
@@ -128,17 +130,22 @@ hr {
 }
 
 .inline-img-container {
-  @media (min-width: 768px) {
-    display: flex;
-  }
+  width: 100%;
+  grid-column: 2/5 !important;
+  max-inline-size: none;
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.inline-img-link {
+  flex: 0 1 45%;
+  padding-inline: 1%;
 }
 
 .inline-img {
-  @media (min-width: 768px) {
-    flex: auto;
-    max-width: 45%;
-  }
-  @media (max-width: 768px) {
-    max-width: 25rem; 
-  }
+  max-width: 100%;
+  max-inline-size: 100%;
 }