Responsive card app made with grid & mobile first

Hello, @gene2971!

You can use the following CSS to first of all center the card in the middle of the page by using flex on the body:

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

• We use min-height:100vh on the body because flexbox needs height to work upon and this will make sure the content is always in the center and doesn't cut off even if in landscape mode on devices.

Your CSS code is well written but here are a few tips to avoid repetition of code:

• Instead of using font-family: var(--ff-text); and font-weight: var(--fw-400); on several elements, you can add them just once on the body.

I also took a look at the HTML file and you were on the right track with the commented anchor(a) tags and a h1!

• These are actually not buttons but anchor tags! So uncomment the anchor tag lines in your HTML and change the element selector in your CSS from button to a and add one more CSS property display: inline-block or display:block to the existing CSS styles. (we add inline-block or block to anchor tags because by default they are inline elements and paddings or margins wouldn't affect them if they are inline).
• You can also uncomment the h1 and add the following CSS to it so that the HTML is more semantic and accessible :

``
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

• This will make the h1 hidden from the users but making it pretty accessible to SEOs and screen readers.
• And lastly, instead of using div for the .container you can use the <main> tag instead to add more meaning to the HTML (main tag basically lets the search engines know what the main content of the page is)

It was good to see that you were on the right track with the semantic HTML even though it was commented out ahah! also good job on the challenge! 🙌🏻

`Keep up the hard work and happy coding!🕺🏻**