The two screenshots attached here render the same four changes -- screenshots only, no media at all, video only, and screenshots plus a video -- through the old and the new grid layout.
*VAR1* is implemented in a list of changes: the title comes first so the media below it can only be read as illustrating the change it sits in. Each change is also enclosed in a card, which addresses the second half of the report ("more spacing or visual separation of changes"): with a boundary drawn, two adjacent changes cannot blur into each other when one is much longer than the other. As a side benefit of laying the cards out with CSS grid rather than in rows of Bootstrap columns, a long change no longer stretches every other change on its row.
On a change's *own* page the order is *VAR2* instead (summary, description, then the media). There the page title is the change title, so nothing can be misattributed, and the reader wants to read what the change is before seeing it.
Two behaviours are deliberately kept from the previous grid: * AWhat each card still * shows a single medium --* is deliberately unchanged: the screenshots when there are the change has any, the its video only when there are none. Stacking a video under a gallery made that card half again it has no screenshot, and the "no image" placeholder when it has neither -- exactly as tall as its neighbour the previous grid did in all four cases. * The {{no_image_thumb.png}} placeholder This issue is gone, because it only ever served to give every cell about the order of a Bootstrap row the same height media and the new layout has no row to align separation between changes, not about the choice of media.
