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

main{
    grid-area: main;
}
.form_headline{
    grid-area: headline;
}
.form_wrap{
    margin-left: 10%;
    grid-area: form;
}
aside{
    margin-right: 10%;
    grid-area: aside;
}
footer{
    grid-area: footer;
}

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




     FOR MOBILE




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

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

    }
    aside{
        display: none;
    }
    .form_wrap{
        margin: 2%;
    }
}

/* 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"
        "headline headline"
        "form aside"
        "footer footer"
        ;
        gap: 1rem;

    }
    
}


/* End of Mobile Styles */