:host {
  display: grid;
  grid-template-columns: 1fr;
}

main {
  min-height: 12rem;
}

@media (min-width: 48rem) {
  :host {
    grid-template-columns: 1fr 16rem;
    grid-template-areas:
      'header header'
      'nav nav'
      'main aside'
      'footer footer';
  }

  header {
    grid-area: header;
  }

  nav {
    grid-area: nav;
  }

  main {
    grid-area: main;
  }

  aside {
    grid-area: aside;
  }

  footer {
    grid-area: footer;
  }
}