@media only screen and (orientation: portrait) {

  div.lightbox div.slideshow, div.lightbox video {
    width: calc(100% - var(--space-large));
  }

  div.lightbox div.slideshow {
    height: unset;
  }

}

@media only screen and (max-width: 1200px) {

  h1, h2, h3, h4, p, header nav, section nav {
    padding: 0 var(--space-large);
  }

  div.slideshow, div.grid, section video {
    border-width: 1px 0;
  }

  section video {
    max-width: 100%;
  }

  footer {
    display: block;
    text-align: center;
  }

  footer p {
    margin-top: var(--space-small);
  }

}

@media only screen and (max-width: 960px) {

  div.grid img {
    width: 25.0%;
  }

}

@media only screen and (max-width: 720px) {

  p.story {
    font-family: "Myriad Pro", sans-serif;
    font-size: 16pt;
    font-weight: 400;
    letter-spacing: -0.02rem;
    line-height: 1.4rem;
  }

  div.grid img {
    width: 33.3%;
  }

  header nav li, section nav li {
    min-width: calc(50% - var(--space-tiny));
  }

  header nav li:nth-child(3n):last-child, section nav li:nth-child(3n):last-child {
    min-width: calc(100% - var(--space-tiny));
  }

}

@media only screen and (max-width: 480px) {

  h1, h2, h3, h4, p, header nav, section nav {
    padding: 0 var(--space-small);
  }

  h1 + h2, h3 + h4 {
    margin-top: var(--space-small);
  }

  p, p.story {
    font-size: 0.8rem;
    letter-spacing: -0.01rem;
    line-height: 1.0rem;
  }

  div.grid img {
    width: 50.0%;
  }

  aside {
    top: 0;
  }

  aside nav ul {
    gap: 0;
  }

  aside nav li {
    flex-grow: 100;
  }

  aside nav a {
    border-color: #ffffff33;
    border-radius: 0;
    border-width: 0.5px;
    padding: var(--space-small);
  }

}

@media only screen and (max-width: 375px) {

  header nav li, section nav li {
    min-width: calc(100% - var(--space-tiny));
  }

  nav i {
    display: none;
  }

}