/* main grid */
.main {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: -webkit-min-content 3px minmax(100px, 1fr) 3px -webkit-min-content 3px -webkit-min-content;
    -ms-grid-rows: min-content 3px minmax(100px, 1fr) 3px min-content 3px min-content;
    grid-template-rows: -webkit-min-content minmax(100px, 1fr) repeat(2, -webkit-min-content);
    grid-template-rows: min-content minmax(100px, 1fr) repeat(2, min-content);
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "title title"
        "left  topright"
        "left  bottomright"
        "nav   nav";
    grid-gap: 3px 20px;
}

.title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: title;
}
.left {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: left;
}
.topright {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: topright;
}
.bottomright {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: bottomright;
}
.nav {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: nav;
}