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>