Responsive Product Review Card CSS

I used this challenge as more of a learning challenge. There were new concepts in here, and I wanted to learn better practices based on a professional. I watched Kevin Powell as a guide, and it was incredibly helpful. I feel much more confident in my markup now. I learned to create a responsive webpage for mobile and desktop using flexbox and grid. Using <picture> is a great tool to add multiple img files that can be used for different screen sizes. I learned better ways of organizing elements too.

This challenge tested me quite a bit with figuring out how to make it responsive. I realize that vertical and horizontal card are the same and it depends on the width of the screen and the max-width you set. I spent quite a bit of time trying to make two separate "cubes" to put next to each other, but I learned quickly they did not maintain interaction how I intended.

I'm still struggling with bringing the contents into the center of the page. For the last challenge I was given helpful advice of removing padding and margin to utilize the flexbox potential. It worked for that one, but for this challenge I could not figure it out.

I would love some advice on that.

Edit: With some helpful advice (a reminder as well) I got it centered! Should stick in my head this time.