.site{
    display: grid;
    grid-template-areas:
        "header header header"
        "featured featured featured"
        "main main main"
        "footer footer footer"
    ;
    gap: 2rem;
}
header{
    grid-area: header;
}
.featured_section{
    grid-area: featured;
}

main{
    grid-area: main;
}

footer{
    grid-area: footer;
}

/**************************************************************




     FOR MOBILE




**************************************************************/

@media screen and (max-width: 640px) {
    .site{
    
        display: grid;
        grid-template-areas:
            "header "
            "featured"
            "main"
            "footer"
        ;
        gap: 1rem;

    }

}

/* End of Mobile Styles */




/**************************************************************




     FOR TABLET




**************************************************************/

@media screen and (min-width: 641px) and (max-width:1024px) {
    .site{
    
        display: grid;
        grid-template-areas:
        "header header"
        "featured featured"
        "main main"
        "footer footer"
        ;
        gap: 1rem;

    }
}


/* End of Mobile Styles */