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

/* Grid Container Style */
.grid-container{
    display: grid;
    grid: "logo logo" auto
            "nav nav" auto
            "header header" auto
            "aside main" 1fr
            "footer footer" auto
            /1fr 3fr;
            gap: 1rem;
            min-height: 100vh;
            padding: 1rem;
            font-size: 1.3vw;
}

.logo{
    grid-area: logo;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav{
    grid-area: nav;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.header{
    grid-area: header;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.aside{
    grid-area: aside;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.main{
    grid-area: main;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer{
    grid-area: footer;
    background-color: darkgray;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Responsive Layout */
@media (max-width:768px){
    .grid-container{
        grid: "logo" auto
            "nav" auto
            "header" auto
            "main" 1fr
            "aside" auto
            "footer" auto
            /1fr;
            font-size: 5vw;
    }
}