Four card feature section with vanilla css

Very nice your project visually, it was very similar to the original. I liked the animation of the header.

Talking a little about user experience. If this project were real, each one of the cards would take the user to another part of the site, so each one of the cards should be inside an <a> tag, it is very interesting that it has some kind of effect when the user places the mouse over it of each card, I would recommend using

card:hover{
     transform:scale();
     cursor: pointer; 

you can take a look at this project here with reference https://marlonpassos-git.github.io/Four-card-feature-section/

Project is well coded. Almost everything is legible (like that comments which separate sections), and good use of variables. On my 13" laptop i have to scroll down to see last card. I suggest to give your body 'height: 100vh' in '@media (min-width: 900px)'. In that case you will have to reduce size of elements.