HTML , CSS , responsive design with media queries

Congratulations well done. One thing I can say is that you can only learn by doing it yourself. You on the right track keep going. Just a few thing you can change in your css. You used margin to place the card in the middle of the page. A better way to do this (in this case) is by using flexbox.

You also need to adjust the height of the card, because some content are flowing out the card.

body{
margin: 0;
padding: 0;
background-color: var(--dark);
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
/* add these lines to place the card in the middle of the page */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;

}

.grid_container{
border-radius: 60%;
color: white;
/*     margin: 170px auto; */ /* you don't need this, flexbox on the body will do the job */
display: grid;
grid-template-columns: 1fr 1fr;
width: 900px;
height : 350px ; 
    
}