/* Phones and small tablets (below main.css's 990px breakpoint). The desktop layout is
   untouched: every rule here is inside the media query. */
@media only screen and (max-width: 989px) {
  html,
  body {
    margin: 0;
  }
  body {
    padding: 16px;
  }

  /* name and prev/next scroll away; only the menu stays at the top */
  aside .branding {
    position: static;
    margin: 0 0 12px;
    padding: 0;
    font-size: 22px;
    line-height: 28px;
  }
  aside .nextprev {
    position: static;
    padding-bottom: 8px;
  }
  aside > div {
    text-align: left;
  }

  /* the menu wraps instead of running its items together */
  nav {
    margin-top: 0;
    padding: 8px 0 16px;
  }
  nav ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 20px;
  }
  nav li,
  nav li:last-child {
    font-size: 17px;
    text-align: left;
  }
  nav .submenu {
    margin-top: 12px;
  }

  main .text {
    text-align: left;
  }

  /* works: two columns, photos fill their tile */
  main .teaser {
    margin-left: -8px;
    margin-right: -8px;
  }
  main .teaser li {
    width: 50%;
    margin-bottom: 16px;
  }
  main .teaser li a {
    margin: 0 8px;
    min-height: 150px;
    background-size: cover;
    font-size: 14px;
    line-height: 19px;
  }
}

@media only screen and (min-width: 600px) and (max-width: 989px) {
  main .teaser li {
    width: 33.333%;
  }
  main .teaser li a {
    min-height: 180px;
  }
}