/*
*,
*:before,
*:after {
  box-sizing: border-box;
}
*/

.header { grid-area: header; }
.header-pic { grid-area: header-pic; }
.item2 { grid-area: menu; }
.panelA { grid-area: main;
         text-align: left; }
.panelB { grid-area: right; }
.footer { grid-area: footer; }


.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'main right'
    'footer footer';
  grid-gap: 10px;
  padding: 10px;
  max-width: 40rem;
  margin: 0 auto;
}

@media (max-width: 30rem) {
    .grid-container {
      grid-template-areas:
        'header'
        'main'
        'right'
        'footer';
      grid-gap: 0;
      padding: 0 1.695rem;
    }
}

.grid-container > div {
    margin: 0 auto;
    margin-left: 0;
}
.grid-container > .header {
    padding: 1rem 0;
}
.grid-container > .header-pic {
}
.grid-container > .footer {
    text-align: center;
}

.grid-container > .footer > p {
    padding-top: 6rem;
}

.grid-container h1, 
.grid-container h2 {
	font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Lists */
.grid-container ul {
	/*list-style: outside disc;
	margin: 0em 0 0 1.5rem; */
	/* list-style: none;*/
	margin: 0 auto;
	padding-left: 1rem;
}

.grid-container li {
    /* display: inline; */
    margin: 0 4px 0 0;
    /* margin-top: 0.5rem; */
}

.grid-container img {
  max-width: 100%;
}

.grid-container h1,
.grid-container p {
  margin: 0 0 1em 0;
}

.portrait {
    max-height: 128px;
    max-width: 96px;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.media {
/*  margin-bottom: 2em;
  border: 2px solid #444;
  padding: 10px;*/
}

.media > .media-title { grid-area: media-title; }
.media > .media-content { grid-area: media-content; }
.media > .media-footer { grid-area: media-footer; }
.media > .media-img { grid-area: media-img; }

.media {
  display: grid;
  grid-column-gap: 10px;
  grid-template-areas:
    "media-img"
    "media-title"
    "media-content"
    "media-footer";
}

.media .media-img {
    text-align: center;
    white-space: nowrap;
    /* border: 1px solid red;
    width: 96px;
    height: 128px; */
}

@media (min-width: 30rem) {
  /* clearfix*/
  .media:after {
    content: "";
    display: block;
    clear: both;
  }

  .media > .media {
    margin-left: 160px;
    clear: both;
  }

  .media .media-img {
    text-align: center;
    margin: 0 10px 0 0;
    width: 128px;
  }
  
  .media .media-footer {
/*    background-color: #eee;
    padding: 10px;*/
  }

  .media > * {
    margin: 0 0 0 160px;
  }

  @supports(display: grid ) {
    /* override */  
    .media > * {
      margin: 0;
    }
    .media .media-img {
      width: auto;
      margin: 0;
      /* text-align: right; */
      height: 100%;
    }
    .media .media-img img {
      vertical-align: middle;
    }

    .media .media-title {
      vertical-align: top;
    }

    .media:after {
      content: none;
    }
 
    .media {
      display: grid;
      grid-column-gap: 10px;
      grid-template-columns: 150px 3fr;
      /* grid-template-rows: auto 1fr auto;*/
      grid-template-areas:
        "media-img media-title"
        "media-img media-content"
        "media-footer media-footer";
    }
  }
}

@media (max-width: 30rem) {
    .media {
      display: grid;
      grid-column-gap: 10px;
      grid-template-areas:
        "media-img"
        "media-title"
        "media-content"
        "media-footer";
    }

    #flex-header {
        text-align: center;
    }
}