CSS Grid - single price card

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

1. Revisiting foundational Grid concepts: While I had previously learned about the powerful grid and its various use cases, I realized I didn't have much practical experience applying it. When I tried to use it in this challenge, I encountered some issues. Going through this challenge allowed me to revisit those core CSS lessons and solidify my understanding by putting them into practice. Repeating and reinforcing these fundamental concepts was invaluable, as it refreshed my knowledge and made me more confident in using them going forward.
2. The importance of overflow: hidden with border-radius: I also noticed an interesting quirk with the border-radius property. When applying border-radius to a card element, I found that the border-radius didn't seem to be applied to the card's child elements. To fix this, I learned that I needed to set the overflow: hidden property on the card. This ensures that any content or child elements that extend beyond the card's borders are properly clipped, allowing the border-radius to be applied correctly. This was an important discovery that will help me create more polished and consistent card layouts in the future.

These two lessons - revisiting foundational concepts and understanding the nuances of border-radius with overflow - were invaluable takeaways from this challenge. They have strengthened my CSS skills and will help me write more robust and visually-appealing code going forward.