Four card feature section

Hello there 👋. Good job on completing the challenge! I have some suggestions about your code that might interest you.

CSS and Styling:

• Avoid using px for font-size, you could read this article to learn why. Letter spacing and line height must not be in px, use rem for all the font-related properties.

• You could use grid-template-area to achieve the same result using grid-area

  .card_container {
  	display: grid;
  	grid-template-areas:
  		". team-builder ."
  		"supervisor team-builder calculator"
  	        "supervisor karma calculator"
  		". karma ."
  	gap: 1rem;
  	margin-top: 2.5rem;
  }
  
  

  And set the grid-area of each card using a modifier class or something similar

  .card--supervisor {
  	  grid-area: supervisor;
  }
  
  .card--team-builder {
  	  grid-area: team-builder;
  }
  
  .card--karma {
      grid-area: karma;
  }
  
  .card--calculator {
  		grid-area: calculator
  }
  
  

I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic! Happy coding!

Here's the correct value to use for the box-shadow property on the cards:

box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.50);