<div class="grid">
	<figure>
		<img src='https://images.unsplash.com/photo-1633083018029-bd1d4d52cb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTYyMw&ixlib=rb-1.2.1&q=80&w=400' alt='Bluetit'>
		<figcaption>A colourful mix of blue, yellow, white and green makes the blue tit one of our most attractive and most recognisable garden visitors.</figcaption>
	</figure>
	<figure>
		<img src='https://images.unsplash.com/photo-1619976302135-5efbc2a7785a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTY4NA&ixlib=rb-1.2.1&q=80&w=400' alt='Robin'>
		<figcaption>Robins sing nearly all year round and despite their cute appearance, they are aggressively territorial and are quick to drive away intruders.</figcaption>
	</figure>
	<figure>
		<img src='https://images.unsplash.com/photo-1623627733740-4724cb1fe84e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NTE5NTc4NQ&ixlib=rb-1.2.1&q=80&w=400' alt='Chaffinch'>
		<figcaption>The chaffinch is one of the most widespread and abundant bird in Britian and Ireland.</figcaption>
	</figure>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: max(1rem, 3vw);
}

figure {
	margin: 0;
	display: grid;
/* 	grid-template-rows: subgrid; */
/* 	grid-row: 1 / 3; */
}

img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	grid-row: 1 / 3;
	grid-column: 1;
}

figcaption {
	padding: 1rem;
	grid-column: 1;
	grid-row: 2;
	background: hsl(0 0% 0% / 0.6);
	color: white;
}

.grid {
	display: grid;
	max-width: 80rem;
	margin: 0 auto;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 1.5rem;
}

@media (min-width: 62em) {
	.grid {
		grid-template-rows: 1fr auto;
	}
	
	figure {
		grid-template-rows: subgrid;
		grid-row: 1 / 3;
	}
}