Recreating my child’s pre-school scrapbook with CSS Grid

<div class="grid">
	<header>
		<h1>Hector’s Adventures with George</h1>
	</header>
	<figure class="fig fig--1" style="--aspect-ratio: 3/4;">
		<img src='https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Small child playing with toys'>
	</figure>
	<p>We played in Nana and Grandad’s garden. We picked apples and made apple crumble!</p>
	<figure class="fig fig--2" style="--aspect-ratio: 4/3;">
		<img src='https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ'>
	</figure>
	<p>We had a game of football.</p>
	<figure class="fig fig--3" style="--aspect-ratio: 3/4;">
		<img src='https://images.unsplash.com/photo-1472162072942-cd5147eb3902?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='Child reading'>
	</figure>
	<p>We read a funny story together.</p>
</div>
<p>https://css-irl.info/building-a-scrapbook-layout-with-css-grid/</p>