.wb {
  width: 100%;
  margin: 0 auto;
  padding: 1.5em;
  display: grid;
  grid-template-areas: 'header' 'sidebar' 'content' 'footer';
  grid-template-columns: auto;
}

@media screen and (min-width: 50em) {

  .wb {
    margin: 0;
    padding: 2em;
    grid-template-areas: 'header header' 'sidebar content' 'footer footer';
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.5fr);
  }

}

@media screen and (min-width: 100em) {

  .wb {
    max-width: 250rem;
  }

}