.wrapper{
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto;
    column-gap: 5px;
    row-gap: 5px;

    grid-template-areas:
    "banner banner"
    "nav main"
    "footer footer"
    ;

}

/* Common code area */
.common{
    padding: 20px;
    border-radius: 10px;
}

/* Grid areas */

.banner { grid-area: banner;
    background-color: #84dbff;
    
    /* allows us to center content vertically */
    display: flex;
    align-items: center;
}

.nav { grid-area: nav;
    background-color: #40ccc5;}

.main { grid-area: main;
    background-color: #fae4b9;}

.footer { grid-area: footer;
    background-color: #84dbff;}

.logo{
    padding: 10px;
    float: left;
    border-radius: 10px;
    margin-right: 20px;
}