HTML CSS (Grid)

It's a well attempt Diego, I'll provide some thoughts below.

• I see a lot of duplicate styling to your .fundamental-n classes. I'll refer to them as a card from here. Before writing any css, look at the design and see if you notice similar patterns of styles first. You can then create a base class that share those common styles then create another class to differentiate it. Example below. At this point your .card is a component that can be re-used multiple times. I'm using BEM as a way of naming components. If interested more info here

<div class="card card--purple">
        <img class="card__image" src="images/image-daniel.jpg" alt="Daniel">
         ...
</div>
<div class="card card--gray">
        <img class="card__image" src="images/image-jonathan.jpg" alt="Jonathan">
         ...
</div>

• For your CSS grid. I can't see a reason for the media query on your fundamental. But a few tips to help with the grid.

Remove the min-height, grid-template-rows from your .fundamental. Also remove the align-items: center which should not squeeze the card's height and doesn't benefit because the cards do not need to be vertically centered.

• To help with not calling the same values over and over again. I recommend looking to CSS custom variables. SCSS can be also useful for variables plus other things to making writing CSS easier, especially when writing out BEM.

• I recommend adding a max-width using a px based value to your main container .fundamental. There's a point where the viewport can get really wide and could possibly skew the design. It highly depends on the design but in this case I think it's needed.

My apologies for it being rather long. Keep it up. It's all about practice 👍👍