Responsive Design using Flexbox and CSS

The styling is also a bit broken because content is able to spill out of the card. This is really common when people first start styling but some base principles can help here too:

1. Always use a modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good modern examples you can look up and use in your projects. (Choose one not both)
2. Set background color on the body. It's rare if ever you need to style on :root or html and it's best avoided.
3. Never limit the height of elements that contain text, including the body. This is what's causing the big overflow problem on this solution. Change height 100vh to min-height so the body height is allowed to grow beyond the viewport height when it needs to.
4. Never style on IDs! That is not what they are for, leads to highly specific css, reduces reusability and can create a maintenance nightmare. Use single class selectors as much as possible for styling. If you want to understand what the ID attribute is for, I've written a post about it in detail on https://FEDmentor.dev.
5. The max width on the component must be in rem. This allows the layout to work for all users, even those of us who have a different text size in our browsers.
6. The component MUST not have a height at all! (See point 3 above). There is no need for a min height either in this case. Let the browser do it's job and decide what height is needed based on the content.
7. Please have one css property per line. This is really hard to read at the moment. Indent/format code consistently. Your code editor can even do this formatting automatically for you with prettier.
8. I recommend you avoid em units for now. You should only use em very intentionally and rarely - You only use it when you want a property to scale with the elements font size. You never use em for font size itself. That could lead to awful bugs in bigger projects because em compounds, meaning you could lose all control over font size as it changes in different contexts. Use rem for font size (and probably for most instances where you're tempted to use em for now).
9. Remove anything to do with height and width on the articles and footer. All the links will need when you add them is padding and width 100% to make them full width. Definitely don't use min-width. That is very rarely needed.
10. Font size must never ever be in px. This is extremely important.

@grace-snow Thank you so much for taking the time on this review... I will go through every point you made here... can´t emphasize how much this helps!! thanks !!

Absolutly loving your post about HTML!! thanks so much again for taking the time to reply a consistent and valuable view!!! @grace-snow

Thanks !@Rhyz26