HTML, CSS, RESPONSIVE DESIGN

👾Hello Evan, congratulations for your solution!

Your component is good done, all the design elements match, you need only to work around cleaning the code a little bit, deleting some unnecessary elements in the html structure and to align the component to the center.

Here's my tips:

Use <main> instead of <section> since the card is the main thing in the whole html and there's no other section and instead of using margins to align the component, you can use display: flex and min-height: 100vh inside the body to align the card to the center, this happens because the child element use the parent height to get the alignment, so this why you need min-height: 100vh.

See the the line below with your code fixed:

body {
    min-height: 100vh;
    background-color: var(--lightGray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-container {
    width: 320px;
    display: flex;
    height: 525px;
    /* margin: 60px auto; */
    padding: 16px;
    background-color: var(--white);
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Hope it helps and happy coding!