Finished this ANNOYING PROJECT, FOUR Card feature section project

Hello, I took a look at your code and some tips I can give you are:

1. Create a separate file just for styling (style.css, for example);
2. In HTML, the <div class="head"> can be replaced by the <header> tag and placed outside the main, this would make your HTML more semantic and make it easier to style the <main> (you wouldn't need the < div class="grid-container">, you could simply make the div of the cards);
3. I recommend you take a look at the grid-template-areas property, it makes it much easier to work with the grid in this type of design. I'll put below a code example on this property that would solve this design with just a few space changes between items.

main {
        display: grid;
        grid-template-areas: "card1 card2 card4" "card1 card3 card4";
      }   
.card1 {
    grid-area: card1;
  }
.card2 {
    grid-area: card2;
  }
.card3 {
    grid-area: card3;
  }
.card4 {
    grid-area: card4;
  }