Stats Preview Card using HTML and CSS

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

With this project, I learned to consider a responsive design for each variation of devices used to browse the Internet (I think I should return to my previous challenges and apply the same guidelines). At first, it's a little confusing, but it leaves a great learning experience.

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

My biggest challenge was what resolutions I should consider to make my page as responsive as possible. I did some research and found that they must be the following:

• 360 × 640 (small mobile)
• 375 × 667 (medium mobile)
• 720 × 1280 (big mobile)
• 1366 × 768 (medium laptop)
• 1440 × 900 (medium desktop)
• 1920 × 1080 (large desktop)

I also noticed that when resizing my browser window, some @media rules do not apply, my question is whether we should also consider those variations or just focus on the standards I mentioned above?

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

It is still not clear to me what value we should put in the sizes parameter, so that the browser takes the correct image to display.

I understand that it corresponds to the area that the image that will be displayed on the screen will cover and the browser chooses the one that best fits, but I set the value that corresponds to the resolution of each image, and it was not applied correctly :/. How is it calculated? or what should I take as a reference?