*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.grid-container{
    background-color: dodgerblue;
    display: grid;
    grid: "header" auto
            "nav" auto
            "main" 1fr
            "aside" auto
            "footer" auto
            /1fr;
            gap: 1rem;
            min-height: 100vh;
            padding: 1rem;
            font-size: 5vw;
}

.header{
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f1f1f1;
    /* padding: 1rem; */
}

.nav{
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f1f1f1;
    /* padding: 1rem; */
}

.main{
    grid-area: main;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f1f1f1;
    /* padding: 1rem; */
}

.aside{
    grid-area: aside;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f1f1f1;
    /* padding: 1rem; */
}

.footer{
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f1f1f1;
    /* padding: 1rem; */
}

/* Small Laptops and Desktops Layout */
@media (min-width:768px) and (max-width:1280px){
    .grid-container{
        grid: "header header" auto
                "nav nav" auto
                "main aside" 1fr
                "footer footer" auto
                /3fr 1fr;
                font-size: 1.3vw;
    }
}

/* Large Laptops and Desktops Layout */
@media (min-width:1281px){
    .grid-container{
        grid: "header header header" auto
                "nav main aside" 1fr
                "footer footer footer" auto
                /1fr 3fr 1fr;
                font-size: 1.4vw;
    }
}