image grouping

frontend/src/styles/global.css

@@ -544,6 +544,50 @@ code, pre, kbd, samp {
   letter-spacing: 0.02em;
   line-height: 1.4;
 }
+/* Multi-image rows. Consecutive markdown images auto-collapse into a flex
+ * row; each figure gets `flex: <aspect-ratio>` inline so widths divide
+ * proportionally and heights line up. Wraps to a column on narrow screens. */
+.prose .figure-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  align-items: flex-start;
+  margin: 2.5rem 0;
+  /* Let the row breathe past the column when it gets dense. */
+  width: calc(100% + min(8vw, 4rem));
+  margin-left: calc(min(8vw, 4rem) / -2);
+}
+.prose .figure-row figure {
+  margin: 0;
+  min-width: 0;     /* allow flex children to shrink below content width */
+  flex-basis: 0;
+}
+.prose .figure-row figure img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: 0;
+}
+.prose .figure-row figure figcaption {
+  text-align: left;
+  margin-top: 0.55rem;
+  font-size: 0.82rem;
+}
+@media (max-width: 640px) {
+  .prose .figure-row {
+    flex-direction: column;
+    width: 100%;
+    margin-left: 0;
+    gap: 1.4rem;
+  }
+  .prose .figure-row figure {
+    flex: 1 1 100% !important;
+  }
+  .prose .figure-row figure figcaption {
+    text-align: center;
+  }
+}
+
 .prose figure figcaption::before {
   content: "— ";
   color: var(--mauve);