Responsive card with gradients

Hi Illed! 👋 You did a great job completing this challange! 🎉

To make sure boxes look good on all devices, I would reccomend changing @media (max-width: 375px) to width where main content that you want to wrap starts touching sides of the screen, which in this case is about 640px. After this slight change your page looks perfect on all devices! I hope that this is answer to deforming boxes. If not, you can ask further!

Also, if you want to make elements of summary always be on furthest right/left (I mean reaction on left, and then 80/100 on right etc), you could change justify-content to space-between in .white-box section instead of gap, so it's nicely placed on both sides with space between them. Then you would have to have some fun in html to put icons and category names together, and add some padding in css on left and right to make it look better. Icons can be moved with translateY too, because they will be too high if you don't do that. Maybe you will find this cool, even tho your question was about something else, it just makes this section look better on all devices.

I hope you found my answer helpful! 😊 Keep up your great work, and I wish you happy coding! 😀