construct a snippet - 2x2 grid of square cells that are bounded by a centered 50% width container that has a 2px dashed gray border

DETAILS

A snippet = the minimum code needed to achieve the described page. Not a full HTML document. DO NOT INCLUDE EXTRA OR UNNECESSARY CODE.

Square = the same width and height.

Cells = a visual box that has some content, like a cell in a table or a spreadsheet. You can achieve this via various HTML tags.

Cells must include a unique square picture (not the same one 4 times). All images must be cropped or resized to the same size and must maintain original image ratio. Do not use CSS to resize them for this assignment. Include 1-2 sentences of text underneath each image.

Cell size does not have to equal image size, but all cells must be the same size, and all images must be the same size.

Container = an invisible box. You can achieve this via various HTML tags.

Only use HTML5 supported tags.

Write your CSS in the CSS area, not in (style) tags or inline. Must utilize CSS classes or id's.