body {
    //background-color: #e8eaed;
    color: #202124;
    margin: 0;
}

/* position a content wrapper below the header */
.down48 {
    margin-top: 48px;
}
.down120 {
    margin-top: 120px;
}

.dual-pane-content {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr repeat(2, minmax(364px,456px)) 1fr;
    grid-template-rows: auto 1fr;
    position: relative;
    width: 100%;
    margin: 24px;
}
.heading-pane {
    grid-row: 1 / 2;
    grid-column: 2 / -2;
    display: block;
}
.left-pane,
.left-pane-up
{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: block;
}
.right-pane,
.right-pane-down
{
    grid-column: 3 / 4;
    grid-row: 2 /3;
    display: block;
}
@media only screen and (max-width: 830px) {
    .dual-pane-content {
	grid-gap:0;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	margin: 0;
    }
    .left-pane {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
    }
    .left-pane-up {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
    }
    .right-pane {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
    }
    .right-pane-down {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
    }
}

@media only screen and (min-width:831px) {
    .fit-screen {
	max-height: 40vh;
	overflow-y: scroll;
    }
}
.margin-block-container {
    display: block;
    margin: 0 24%;
}
@media only screen and (max-width:830px) {
    .margin-block-container {
	margin: 0 64px;
    }
}
@media only screen and (max-width:630px) {
    .margin-block-container {
	margin: 0;
    }
}


.portal-wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    justify-items: center;
    align-items: center;
    min-height:100vh;
    background-color: #e8eaed;
}
.portal {
    grid-template-row: 1 / 2;
    grid-template-column: 1 / 2;
    padding: 24px 40px;
    margin-top:-25vh;
    display:block
}