Single Price Grid Component

Hey Taha!

Great markup and CSS code structure. Everything is simple and easy to understand.

That being said, I have a few comments:

• Setting a padding-top of 10vh on your .container element may be a waste of space on the mobile layout. Mobile users don't really have much screen space. Instead of setting a padding-top on the .container element, you could try to page center it (both on the desktop and mobile layout). You can look up the web for "centering a div in body element". I personally prefer to turn body into a flex container (display: flex), give it a height (min-height: 100vh), a vertical flow (flex-direction: column), align it's items to the center of the main axis (justify-content: center) and the same for the cross axis (align-items: center). For that to work, you need to remove margin: auto from your .container element;
• Try horizontally resizing your window with Chrome/Firefox Dev Tools (F12). Your media screen breakpoint is pretty small. There's a point between 900px and 400px where your text begins to squeeze. You can either set a higher value for your breakpoint or change the way you set your .container width;
• And I think you missed the Sign Up button hover state, but that's easy to implement.

That's all! Good work! I would appreciate if you could give me your feedback on my solution too. If my feedback helped you in any way, feel free to upvote it :)