.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 10px;
    grid-template-rows: [row-header-start] auto
                        [row-content-start] auto
                        [row-panel-start] auto
                        [row-footer-start] auto [row-footer-end];
  }

  .mainheader {
    grid-row: row-header-start;
  }

.content {grid-row:  row-content-start;}
.panel {	grid-row: row-panel-start; }

.mainfooter { grid-row: row-footer-start;  }

  @media (min-width: 550px) {

    .wrapper {
      grid-column-gap: 2em;
      grid-row-gap: 20px;
      grid-template-columns: [col-left-start] 2fr [col-main-start] 4fr [col-main-end];
      grid-template-rows: [row-header-start] auto [row-content-start] auto [row-footer-start] auto [row-footer-end];
    }

    .mainheader {
      grid-column: col-left-start / col-main-end;
    }

    .panel {
      grid-column: col-left-start / col-main-start;
      grid-row: row-content-start;
    }

    .content {
      grid-column: col-main-start / col-main-end;
      grid-row: row-content-start;
    }

    .mainfooter {
      grid-column:  col-left-start / col-main-end;
    }
}

/* custom for this site */ 
body {
  font-size: 1.7em;
  line-height: 1.6;
	}
p {margin-bottom: 1rem;}
figure { margin: 0;}
figcaption { font-size: 88%;}

figure.main { 
	padding: 1rem 0 3rem 0;
	}
img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
	}

div.panel ul{ list-style: none;}
div.panel ul li {  margin-bottom: 0; }
ul.submenu {
  margin: 0 0 0 1.5rem;
  font-size: 90%; 
  }