Four card feature section

What are you most proud of, and what would you do differently next time?

Major learning for this project is the usage of grid-template-areas property.

Beside mobile first approach also helped me to design the page. All necessary properties are applied to elements at mobile first approach. And other properties (media query, grid-template-areas, :nth-child() ) applied when it is needed.

@media(min-width:900px){

    .grid-container{

        display: grid;

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

        /* grid-template-areas: arranging how cards to be laid out on page.
          Could be thought as blueprint of layout
        */
        grid-template-areas: 
         ".   two   ."
         "one two   four"
         "one three four"
         ".   three .";
    }

    /* If card are defined outside of media query, they are overlapped  */

    .card:nth-child(1){
    grid-area: one;
    }

    .card:nth-child(2){
        grid-area: two;
    }

    .card:nth-child(3){
        grid-area: three;
    }

    .card:nth-child(4){
        grid-area: four;
    }

}

What challenges did you encounter, and how did you overcome them?

The biggest challenge for me is the grid layout. This could be done by relocating the cards in grid layout by using span, grid-column etc.., but I assume this could take longer to code.

But of course, if you have enough tools in your toolbox you may have different solutions for any project.

What specific areas of your project would you like help with?

Any feedback is welcome!