Responsive card component with html and css flexbox and grid

What are you most proud of, and what would you do differently next time?

The direction I'm going in understanding semantic html, and how certain properties affect elements

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

Encountered challenges with using the picture tag for dynamic images and used the mdn to learn how to effectively use the picture tag

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

Semantic html, areas of when to use margin over padding. In this scenario, in order to create the additional space I used padding on the body element to get the separation of the card and the background on the left and right side. Also I set the html and body tags to have a height of 100% in order to create height to center the card. Is that the correct way of doing it or is it a better way of putting the card in the middle of the screen