All solutions

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

Most proud of learning about grid areas for layout of this plus sign order of cards

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

I was using viewport width/height in html and body css which made it difficult to style the mobile design. I simply removed it thanks to advice from Kevin Powell's tutorials.

I can not seem to get the background gradient correct for the card-container.

1. Why doesn't margin property, (this is in the media query), work without overflow: hidden? Before adding overflow: hidden, only margin-left was visible while margin-right had no effect.
2. Was flexbox a good choice here compared to CSS Grid?
3. I hope I did the accessibility features correctly.

1. This was my first time using media query in CSS to switch between layouts and images. When should I use min-width or max-width in these media queries?
2. In mobile version, the image's div container has a longer height than the image's height. I tried object-fit but still the image did not fill the div container. So I'm unsure what I did wrong in my css or in that particular div container.
3. What are the best ways to separate sections in one div? CSS grid or Flexbox? Are there situations for each?