Single-price-grid-component

You used position to place the card in the middle of the page. You could have done this with flexbox.

body{
width: 100%; /* you don't need this. the width of body is by default always 100% */
min-height: 100vh; /* to make it good practice, try using min height instead */
font-family: var(--Font-Family);
background-color: var(--Light-Gray);
font-size: var(--Font-size);
/* add these lines to place the card in the middle of the page */
display: flex;
justify-content: center;
align-items: center;
}
#card{
/* you can remove these lines, flexbox on the body will do the same */
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* ############################# */
background-color: white;
border-radius: 10px;
width: 720px;
height: max-content;
display: flex;
flex-direction: column;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

/* if you change the breakpoint from 400px to 720px it will make a better transition from desktop to mobile */
@media (max-width:720px) {
body{
/*         height: 100%; */
}
#card{
/*         transform: translate(-50%,10%); */
width: 90%;
/*         padding: 0; */
/*         margin-bottom: 5rem; */
}
.community{
/*         width: 100%; */
padding: 1.7rem ;
}
.bottom{
flex-direction: column;
/*         width: 100%; */
/*         padding: 0; */
}
.subscription,.why_us{
width: 100%;
padding: 2rem;
}
.subscription{
border-radius: 0;
}
.why_us{
border-radius: 0 0 10px 10px;
}
.community > h2{
font-size: 1.5rem;
}
.community > h3{
font-size: 1.1rem;
}
/*     .community > p{
width: 90%;
} */
}

I've commented out thing that you don't need.