Responsive order summary using Flex and CSS Grid

Hello Erick, congratulations for your solution!

In this challenge you don't really need a media query to manage the component card responsiveness. There are 2 zones you need to work the responsiveness, the card requires max-width: 340px to be responsive and able to contract, note that the difference between width and max-width is that the first is fixed and the second (max) means the card has a maximum size but can be smaller. So having the card with max-width all you need is the inner content with max-width: 100% to have the container size less its padding (the pricing section + button).

To have the image respecting the container size use display: block and again max-width: 100% / object-fit: cover to make it scales and crop inside the container limits.

Hope this helps, happy coding. 👍

Hello everything is fine?

I really liked the result of your project, but I have some tips that I think you will like:

I noticed that the background is lowering according to the screen resolution, to solve this we can do the following:

background-size: 100% 50vmin;

To further improve the responsiveness of the project, we can put a padding on the body, so that the content doesn't hit the edge when the screen resolution is small:

body { padding: 0 20px; }

The rest is really good! Hope it helps... 👍