Responsive design with flex

Hi 👋, in case you want to take a look:

HTML 🧱:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

CSS 🎨:

• You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. A popular CSS Reset from Josh Comeau 🔎

For example, these are some very common and useful ones:

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

picture,
img,
svg {
display: block;
max-width: 100%;
}

• Length units such as pixels may not be the best alternative because absolute units don’t scale. Relative units like rem or em are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

• You don't need to use font-weight of 400 and 700 as these are the default values for normal and bold fonts. So, these are the default values for paragraphs and headings.

Please let me know if you want more info on any of these topics or disagree with something. I hope it’s useful 🙂

Regards,