Four card feature section using grid

Hey @joaoxavier-profissional, nice work!

I can see you thought of the cards' layout as a grid of 6 columns. It is really a good thinking; I did something similar.

As you can see in the design, there are 3 columns, the first one has a single card, the second one has 2 above each other, and the third one also has a single card. So, how about thinking of the layout as a grid of 3 columns and 4 rows?

This way, you can just do the following:

.card-1, .card-4{
    grid-row: 2/4;
}

.card-2{
    grid-row: 1/3;
}

.card-3{
    grid-row: 3/5;
}

Also, For the heading, you may use <br> after the <span> tag so that the text after the span goes into a new line, or you can just use <p> for the regular text and <h1> for the bold one. And don't forget to change the font weight for the desktop view. :)

Hope that helped. Keep going ☘️