HTML CSS GRID

Hey, awesome work on this one. Layout looks great in desktop it just needs to be centered properly, the mobile layout looks odd since there is like a unfilled part of the container.

Some suggestions would be:

• Avoid using height: 100vh on a large container especially the body tag as this limits the element's height based on the screen. Instead use min-height: 100vh on it, this takes full height and lets the element expand if needed.
• Always have a main element to wrap the main content of the page. On this, the .container should be using main instead of div. Also, you don't need margin to center it. On the .container remove the margin and on the body tag add:

align-items: center;
display: flex;
justify-content: center;
min-height: 100vh;

This will always center your content properly with having to create unnecessary sizes on the screen.

• On the first section, you don't need to use span to wrap again the text-contents because you could just use the first element that wraps it to style.
• The pricing should be using p tag and not just span always wrap text-content inside a meaningful tag.
• Adding a cursor: pointer to the button to make it more natural since it is interactive

Aside from those, great work again on this one.