/* main grid */
.main {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: -webkit-min-content 3px -webkit-min-content 3px minmax(100px, 2fr) 3px -webkit-min-content 3px minmax(50px, 1fr) 3px -webkit-min-content 3px -webkit-min-content;
    -ms-grid-rows: min-content 3px min-content 3px minmax(100px, 2fr) 3px min-content 3px minmax(50px, 1fr) 3px min-content 3px min-content;
    grid-template-rows: repeat(2, -webkit-min-content) minmax(100px, 2fr) -webkit-min-content minmax(50px, 1fr) repeat(2, -webkit-min-content);
    grid-template-rows: repeat(2, min-content) minmax(100px, 2fr) min-content minmax(50px, 1fr) repeat(2, min-content);
    -ms-grid-columns: 1fr 0px 3% 0px 1fr;
    grid-template-columns: 1fr 3% 1fr;
        grid-template-areas:
        "title    title    title"
        "abstract abstract abstract"
        "left1 arrow right1"
        "left1 void  right2"
        "left1 void  right3"
        "left2 void  right4"
        "nav   nav   nav";
    grid-gap: 3px 0px;
}

.title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: title;
}
.abstract {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: abstract;
}
.left1 {
    -ms-grid-row: 5;
    -ms-grid-row-span: 5;
    -ms-grid-column: 1;
    grid-area: left1;
}
.left2 {
    -ms-grid-row: 11;
    -ms-grid-column: 1;
    grid-area: left2;
}
.right1 {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
    grid-area: right1;
}
.right2 {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
    grid-area: right2;
}
.right3 {
    -ms-grid-row: 9;
    -ms-grid-column: 5;
    grid-area: right3;
}
.right4 {
    -ms-grid-row: 11;
    -ms-grid-column: 5;
    grid-area: right4;
}
.arrow {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
    grid-area: arrow;
}
.void {
    -ms-grid-row: 7;
    -ms-grid-row-span: 5;
    -ms-grid-column: 3;
    grid-area: void;
}
.nav {
    -ms-grid-row: 13;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    grid-area: nav;
}