Flex and CSS grid

Hey @mohamedshawgi,

Your solution looks awesome, close to the design and technically great - no HTML or accessibility issues. I only have a couple of small suggestions:

• For improved accessibility, I'd recommend adding some hover and focus styles to the button to indicate that it's interactive.
• Instead of using div elements for each section, you could use section elements. This would make it slightly more semantic, since each section contains its own type of content, but they are still related.
• Speaking of semantics, I would use a p element instead of an h2 for "30-day, hassle-free money back guarantee". Each section should ideally have one heading, followed by content. While having two headings isn't the worst thing to do, it could be confusing because screen reader users might expect more content than there is, since the first sub heading indicates that there are more sub headings further down, which isn't the case.
• You could tweak your media query breakpoint to be a bit lower, since it starts breaking quite early, which looks weird. I think a good value would be around 600px.

Other than that, you are good! Hope this helps you improving your solution, let me know if you have any questions :-)