Responsive page with grid, custom variables, and media queries

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

Disclaimer - I was heavily assisted for this project. I spent ~2 hours trying to figure out why display: flex was not placing the cards side by side and centering them in the middle of the screen. I did utilize Kevin Powell's "code along" solution to solve that portion and to also solve various aspects such as media queries etc.

I am bummed with the amount of assistance I needed but I am trying to view it as a learning experience.

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

Numerous challenges starting with just getting the cards in the middle of the screen, figuring out how to separate the results on the right, the large number in the middle of the left card, trying to figure out how to use custom variables with opacity, etc.

This one was hands down the hardest "newbie" challenge, in my opinion, that I have taken on from the site.

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

I am sure I'm not the only one stuck in the "do I use flex or grid" loop but I genuinely don't know which one is better in any specific situations. Any guidance to resources or feedback would be fantastic.

I am also apparently not as well versed in the basic tools for HTML (like thinking to use span tags) etc., and would like to hear how you look at planning and tackling your specific projects.