responsive product card using flexbox

HI

• when styling , use the mobile first approach, where your first styles should be targetting mobile and the use a media query when necessary using the min-width.
• after creating your html structure start styling from outside to inside, to enable to create some layouts. Here is what I mean, It is normally said the box model or everything in CSS is a box. Since you are starting from outside, which is the body:

1. Do you have a box or boxes? This is important to determine the max-width of your container. For simplicity , let us remove the footer element from the code altogether so that we have one box (the main) remaining. What we are saying here is that , the body element has one child main element. Then , how does this box (main) relates to the body in mobile view, tablet , desktop view etc? Points to bear in mind are as follows:

• They should be some space between the body and its child - we can add padding: 1rem to the body. That will always guarantee a space of 1rem regardless of whatever device you are using
• What is the maximum width the main container should grow to. Yes using max-width is responsive , than using width . Lets give the main element a max-width: 64rem (note - this is a random figure , use the design to get the actual max value).
• as for centering, we have flex to use to our advantage on the body. Right , check the responsiveness and presentation of the main element using Devtools or on actual devices.

this declaration on images is usually enough:

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}