The grid layout has two columns - one with images and the other with the text content. The image column is also a grid with two columns and two rows. The position of the image grid and text block can be switched and the text can appear above or below the images on screen widths below the break point. The image overlay with caption can show on hover when viewed on computers. The images can be hyperlinks and show an icon when this function is turned on.
A two column grid layout with an HTML5 <figure> and <article>. The <figure> has an image with alt text and an optional scale animation and an overlay with the image caption in the <figcaption> element which can be vertically aligned at the top, center or bottom. The <article> has a heading and text and an optional link which are aligned vertically in the center. Thes items can be switched and the text can be top or bottom below the break point.
