Media Query, box-zising:borderbox and Display:Flex

Hi

This is looking a bit broken on my mobile so here are suggestions to improve

1. Add the missing background color to the body like the design
2. You lose all control by setting margin like this: margin-top: 20%;. Instead, place a little margin on the component in a unit like px or rem. The margin should be on all sides of the card because it's purpose it to stop the card from hitting the screen edges. OR (and arguably better) don't put any margin on the component and add a little padding on it's wrapping element instead
3. You do not need a div for card outside of main. If this was a real project your component (the card) would always go inside the main landmark
4. Never give components a fixed width, and especially not in px. Instead, give the component a max-width in rem. This will allow it to scale correctly on all devices, even if the user has a different default font size.
5. There is no reason to make the component into a flex column. The image and content div will stack by default anyway
6. Instead of setting border radius on the image, set it at the component level along with overflow: hidden to crop out the overflowing child elements at the corners
7. Always use a modern CSS reset at the vert start of the styles. Do this in every project. Andy Bell just posted an update to his last week and that is a good one to look up and use
8. The component needs a white background
9. Do not wrap everything inside the component in divs!! Only add a node when it is necessary to achieve the layout. You can place classes directly on elements like heading and paragraph etc
10. Be aware of the difference between padding and margin. You should be using margins for the vertical spacing within the component - you are creating space between the child elements, not space inside them. I wrote an article about this topic
11. Do not use brs like this. Let lines break where they need to. This will look broken for lots of screen sizes and for screenreader users the sentence could be interrupted by the announcements of "BREAK" every time there is a br
12. Why is the music icon nested inside so many divs? No need
13. Personally, I think "Annual Plan" should be a heading. But you may disagree and that's fine
14. Can you explain why you chose an anchor for change, proceed and cancel? What do you expect to happen when a user clicks on each of those? (might be fine, might not - I'm trying to understand from you if this was a conscious decision)
15. Font size must never be in px. Use rem. Please read this to fully understand why and other affected properties Some of your fonts are extremely small in this too. The style guide will give a font size for the body. That needs translating to rem before use and tells you what the main paragraph should look like. You should be able to size everything else based off that.
16. Media queries must be defined in rem, never px
17. Your media query is set far too small. Most mobile devices would see the desktop version because of this. Usually you only make the switch to a larger screen design when there is room for the layout to change. In this case I wouldn't expect the desktop changes to happen until at least 48rem.
18. It is more performant to link fonts in the html head and not call them from within CSS.