Overlapping Images

The grid has 10 columns and 7 rows when viewed at browser/device widths above the break point.
Each image spans 4 columns to create the horizontal overlap and 3 rows to create the vertical overlap.
The heading and text block are centered horizontally and vertically in the spaces.
Images
The images are inserted in a <figure> element with alt text for the search engines. The caption inserted in a <figcaption> element which is absolutely positioned to overlay the bottom of the image.
The <figure> can have a border if required and the opacity of the images can be reducted to show the background image when present. The image opacity is reset to 1 below the break point.
Background
The background can be a solid color with an opacity slider or an image. Below the break point, the background image is removed to be replaced by the color selected.
Break Point
In this example,the break point is set so that the layout changes on tablets in portrait mode. The grid is reduced to 1 column so that all the items stack.
The grid has 5 rows so that the heading and text are in a row with auto height and the images are in rows with a height of 1fr (fractional unit). The items are vertically spaced by the value given to the "grid-row-gap" selector.
Stacking Order
Since the images are relatively positioned, they will stack in the order that they are inserted with the second on top of the first and the third on top of the second one
Each image has a control for assigning it a z-index to rearrange the stacking order. In this example, the second image has a z-index of 1 and the other two are left at zero.