@media (min-width: 1200px) {
    #flex {
	margin: auto;
	display: grid;
	justify-content: center;
	grid-column-gap: 2em;
	grid-template-columns: 15em minmax(auto, 60em) 15em;
	grid-template-areas: "n1 w n2";
    }

    #flex > div { margin-top: 1em;}
    #flex #grid-n1 { grid-area: n1;}
    #flex #grid-n2 { grid-area: n2;}
    #flex #grid-w { grid-area: w; }

    #side-nav > .nav-fixed  {
	position:fixed;
	min-width: 10em; max-width: 15em;
	margin-top: 1em; padding: 0.5em;
    }
}




@media (min-width: 800px) and (max-width: 1199px) {
    #flex {
	margin: auto;
	display: grid;
	justify-content: center;
	grid-column-gap: 2em;
	grid-template-columns: 15em minmax(auto, 60em);
	grid-template-rows: max-content  auto;
    }

    #flex > div    { margin-top: 1em;}
    #flex #grid-n1 { grid-area: 1/1/2/2; }
    #flex #grid-n2 { grid-area: 2/1/3/2; }
    #flex #grid-w  { grid-area: 1/2/3/2; }

}


@media(max-width: 799px) {
    #flex #grid-w  { padding: 1em;}

}