Four Card Features Section using CSS GRID

Hey, good job! Here is some feedback.

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Wrap all of your content in a <main>.

• The card icons are decorative, so the alt text should be empty:alt="".

CSS:

• It's good practice to include a CSS Reset at the top.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• There shouldn't be a need for margin on any of the cards. I inspected your Grid in DevTools, and saw that you only had 3 rows, which is causing the need to set a margin on .team and .karma. This layout needs 4 rows to work. Sometimes it's best to be very explicit, and tell the browser exactly how many rows and columns we want. First, I would set up the columns and rows on the .card-box:

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);

Then, we must slightly adjust the placement of the cards in the rows - we need to declare not only where they start, but also where they end. By default, it will span only 1 cell, therefore we must explicitly set the cards to take up more than 1 cell:

.supervisor {
  grid-row: 2 / 4;
}
.team {
  grid-row: 1 / 3;
}
.karma {
  grid-row: 3 / 5;
}
.calculator {
  grid-row: 2 / 4;
}

NB: Remember, grid rows and columns are indexed by the lines, not the cells. That's why we use 5 and 4 in a grid with 4 rows and 3 columns.

NB 2: You only need one media query, and it must be in rem, not px. I would make the layout switch before it hits 1000px - try around 50rem, which equals to 800px.

Hope this helps :)