Responsive Images within Grid?

Tell us what’s happening:
Describe your issue in detail here.
I am working on the tribute project and in my attempt to “make it my own”, I decided to use a grid to help format the layout of the page. After putting the project together… I decided to take a look at what was actually required and I noticed that two of the items required are centering the picture within its parent element and making the image responsive.

Is it possible to make responsive images within a grid? If so…I must be going about it wrong.

Also… using margin: auto; isnt “checking the box” for centering the image. This may all come back to the fact that I “jumped ahead” a bit and am using a grid for the project…

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

And while we are at it… using 1fr isnt actually equally portioning the the grid panels…
Again… maybe I am missing a concept here… also tried 50%.