Two changes to index.html, both small and both from the theory you just read.

Give every image its real dimensions

Each card image gets width and height — the picture's true pixel size, so the browser reserves the right space before the file arrives and nothing jumps as the page loads. loading="lazy" is already there from before; the dimensions join it:

<img src="…/DustAngelNebula_rba1024.jpg" alt="A Dust Angel Nebula"
     width="1024" height="664" loading="lazy">
<img src="…/moonhalo_mccay.jpg" alt="A Halo Around the Moon"
     width="500" height="743" loading="lazy">
<img src="…/burnscliff_opportunity.jpg" alt="Burns Cliff on Mars"
     width="640" height="480" loading="lazy">

Use each picture's real size, not a guess — 1024×664, 500×743, 640×480. They're three different shapes (one is even taller than it is wide), and the numbers say so honestly; object-fit: cover still crops them all to the same tile. And note the alt on each: it names what the picture is, not the filename.

No srcset. You read why: the only two sizes NASA gives are both far larger than a card tile, and a guessed width descriptor would make the page heavier on a phone. The three attributes above are the ones that genuinely help, so those are the ones that ship.

A proper credit link

The hero gains one line — an inline link crediting NASA, using the .text-link class you'll style next:

<p>Powered by NASA's <a href="https://apod.nasa.gov/apod/" class="text-link">Astronomy Picture of the Day</a>.</p>

Its href is absolute, because it points at NASA's site, not yours. It's also the honest thing to do: you're showing NASA's photographs, so you name the source in text a reader can follow. Watch this link as you build — at rest it's marked only by colour, which is exactly the "never colour alone" case from the theory. Keep an eye on whether that feels readable to you; it's the kind of judgement you'll make on every inline link.