body {
    font-family: "Comic Sans MS", "system-ui", "sans-serif";
    font-size: 100%;
    line-height: 144%;
    margin:0;
}

.grid-main{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 1em;
    padding: 1em;
    grid-template-areas:
        "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
        "mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn  mn "
        "asd asd asd asd asd asd asd asd asd asd asd asd"
        "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
}




header{
    min-height: 30vh;
    background-color: #deb;
   /* display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    align-items: center;*/
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(1,  minmax(200px, 1fr));
    grid-area: hdr;
}

nav{
    grid-column: -2/-1;
}

main{
/*    grid-column: 1/-1;*/
    grid-area: mn;

}

aside{
    grid-area: asd;
}

footer{
    grid-area: ftr;
}

.grid-parent{

    background-color: #eee;
    display: grid;
    grid-template-columns: subgrid;
    gap: 1em;
    padding: 1em;
}

.card{
    background-color: #ba98;
    padding: 0.5em;
    grid-column: 1/ -1;
}

footer{
/*    grid-column: 1/-1;*/
}

/*  Media Queries*/

@media (min-width: 550px){
    .grid-parent, header{
        grid-template-columns: repeat(2, minmax(200px, 1fr))
    }

    .card {
        grid-column: span 6;
    }
}

@media (min-width: 750px){
    .grid-main{
        grid-template-areas:
            "hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
            "mn  mn  mn  mn  mn  mn  asd asd asd asd asd asd"
            "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
    }

    .card {
        grid-column: span 3;
    }

    .grid-parent, header{
        grid-template-columns: repeat(3, minmax(200px, 1fr))
    }
    nav{
        grid-column: 2/-1;
    }
}