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

.title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: title;
}
.abstract {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: abstract;
}
.top {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: top;
}
.left-caption {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    grid-area: left-caption;
}
.right-caption {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
    grid-area: right-caption;
}
.left {
    -ms-grid-row: 9;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: left;
}
.right {
    -ms-grid-row: 9;
    -ms-grid-column: 3;
    grid-area: right;
}
.right-legend {
    -ms-grid-row: 11;
    -ms-grid-column: 3;
    grid-area: right-legend;
}
.legend {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: legend;
}
.nav {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: nav;
}