Responsive Preview Card using CSS Grid

What challenges did you encounter, and how did you overcome them?

The mobile version looked good when resizing the screen on my laptop, but it broke when checking from my phone. The image was stretched over the entire container and the text became an overlay on the image. What I did was to put this code in mobile view:

.wrapper {
   height: max(auto, 100vh);
}

It was initially set to height: 100vh, so it was resizing to the viewport height of the phone instead of creating an overflow.

What specific areas of your project would you like help with?

Is there a better way to align the container at the center of the screen while the footer is at the bottom? I'm using Grid to do it in this project, and I have used Flexbox combined with margin-top: auto in the past.