You've made use of semantic tags which increase readability, CSS variables which helps manage scalability
Responsiveness for larger screens, I see you only have two breaking points which would only be responsive on a few devices. Layouts on other devices might not look so great. If you would like more info on this feel free to ask me.
.card {
border-radius: 50%; /* This is a better option than pixels */
}
font-size: 11px; change this to the following rem size as it is more responsive
11px/16 =0.6875rem
Apply this to any other px's in your code
Grid strength's: grid-template-columns and grid-template-rows gives us the flexibility for laying out the cards effectively.
Typography: font-family and font-weight helps with consistency and a well polished professional appearance.
There was plenty attention to detail in this code!
Well done!
