responsive price grid component - semantic html, css grid

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Instead of using two media queries to modify the width of the main element, it's more advisable to use a fixed max-width of 900px to prevent it from stretching too much. Additionally, set a margin of 0.5rem to avoid it touching the edges of the screen on mobile devices.

main {
    /* width: 85vw; */
    max-width: 900px;
    margin: 0.5rem;
}

• You can use classes instead of using IDs and nth-child since they are less specific.

• You can enclose the price and text in a single paragraph to make it read continuously in screen readers: <p class="price"><span class="white">$29</span> per month</p>.

I hope you find it useful! 😄

Happy coding!

Hello Christina!

Your project looks great!

I noticed that you used margin to place the card in the middle of the page. Here's a very efficient way to center the card (vertically and horizontally):

• Apply this to the body (in order to work properly, you can't use position or margins):

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

• Also, since the sign up button is a clickable element, it's nice to add cursor: pointer to it.

I hope it helps!

Other than that, great job!