Four Card Feature Section (HTML & CSS)

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

This has been the best challenge I've encountered so far.

Was a great opportunity to dive deeper than before and learn further nuances in a few aspects. I will now mention some:

• Had to dig way deeper into implicit and explicit grid, since I was really trying to make it the "all-implicit-grid" solution work. Even though that doesn't seem possible, I now feel much more comfortable with them and with the decision process. Next time can only feel better now that this is clearer and not anymore a hurdle as before.

• Been wanting to put to use the container queries and I found this was a pretty good opportunity, not only for the features section inline size to determine the cards grid, but also for each card's size to determine the size of its image. This, in turn also allowed me to use container units (cqi) and container queries with logical properties instead of physical ones, as suggested in this great article and also found in the standards here. All of this was really exciting, too!

• Finally (and almost as a funny aside), in the last project I had already decided (and stated in my self-feedback) that I was going to tackle the next one first with a minimal reproducible example in CodePen where I would experiment, and then once I had the main ideas in place I would get to code the actual one. Well, guess what, I spent many hours struggling to understand some weird behavior with my pen where things were going tiny upon me resizing viewport UNTIL... I realized how `` tags get reset in CodePen and how you can actually include any meta tag you want there (lesson learned: read the docs, read the docs, ALWAYS read the docs! :) )

Overall, this was a great project and some of the things I learned and/or became more comfortable with will accompany in the coming ones (together with any feedback I receive, of course!).

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

Challenges: as mentioned above. How did I solve them? By researching, studying, experimenting with the knowledge and troubleshooting.

For example, my biggest challenge was the decision process for using implicit grid vs grid areas for the layout desired. I studied both deeper and experimented in CodePen with both approaches until I concluded a combination of both through container queries would render that result.

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

I would love to know if it was possible at all to actually do the whole thing just with an implicit grid. I honestly feel like that wasn't possible, which is why I ended up using container queries an creating grid areas for larger screens, which allowed me to set the cards 2 and 3 in the same column.

But is there a way? Or any other suggestion or feedback is welcome, especially with regards to CSS layout and responsiveness which is my main focus right now.

TIA!