@media screen and (max-width: 800px) {
  body { --title: 40px/1.05 Helvetica, sans-serif }

  #wrapper { scroll-snap-type: none; }
  #loader { min-height: -webkit-fill-available }
  section {
    grid-template-columns: repeat(8,1fr);
    padding: calc(var(--gap)*2) var(--gap);
    height: auto;
    grid-row-gap: 60px;
  }

  /* nav */
  nav ul {
    top: calc(var(--gap)*2);
    grid-template-columns: repeat(8,1fr);
  }
  nav .home { grid-column: 1 / span 3 }
  nav .catalogue { grid-column: 4 / span 2; text-align: center }
  nav .contents { grid-column: 7 / span 2; text-align: right }

  /* cover */
  .cover {
    min-height: -webkit-fill-available;
    overflow: hidden;
    padding-bottom: calc(var(--gap)*3);
    grid-auto-rows: auto;
  }
  .cover--logo {
    grid-column: 1/-1;
    grid-row: 1;
    margin-left: 0;
    float:left;
  }
  .cover--catalogue {
    grid-column: 1/-1;
    grid-row: 1;
    margin-top: 20vh;
    margin-left: 4.5vw;
    padding-right: 5vw;
    float:left;
  }
  .welcome {
    grid-column: 1/-1;
    grid-row: 3;
    margin-top: auto
  }

  /* collections */
  .collection { margin: 60px 0 }
  .collection figure {
    grid-row: auto;
    transform: translateY(0%);
    opacity: 1;
  }
  .collection figcaption { margin-top: 6px }

  /* overlays */
  menu {
    width: 100vw;
    grid-template-columns: repeat(8,1fr);
    padding: calc(var(--gap)*2) var(--gap) 0 var(--gap);
  }
  .overlay__menu {
    grid-column: 1 / span 8;
    z-index: 2;
    pointer-events: none;
  }
  .overlay__menu h3 { pointer-events: all}
  .overlay__content { padding-bottom: 150px }
  .overlay__content--text, .overlay__content--instruction { top: calc(var(--gap)*5) }
  .overlay__content--text, .overlay__content--instruction, .overlay__content--response { grid-column: 1 / span 8 }
  .overlay__content--text .footnotes { padding-left: 24px}

  /* toc */
  .collection__toc {
    padding-top: 90px;
    display: block;
  }
  .collection__toc > div {
    margin-top: 0;
    grid-column: 1 / span 8;
    overflow-y: hidden;
  }
  .contentsMenu {
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 150px;
  }

  .toc__about .about { overflow-y: hidden;}
  .toc__about > div { display: block; margin-bottom: 60px;}
  .toc__about .links { margin: 40px 0 60px; display: none}
  .toc__content ul { margin-bottom: 60px }
  .links__mobile {
    display: block;
    font: var(--small);
    padding-top: 60px;
  }
  .links__mobile img { height: 90px; width: auto; margin-top: var(--gap); display: block}

  .supporters {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-column-gap: calc(var(--gap)*2);
    padding-bottom: 100px;
  }
  .supporters > div:first-of-type { display: none }
  .supporters > div:nth-of-type(2) { grid-column: 1/-1 }
  .supporters > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 16px 1fr 1fr;
    align-items: center;
  }
  /* .supporters img { object-fit: contain } */
  .supporters img { grid-column: 1/-1 }
  .supporters h3 { grid-column: 1/-1 }
  .supporters--presenting, .supporters--project, .supporters--text, .supporters > div:nth-of-type(6) {
    grid-template-columns: 1fr!important;
    align-items: flex-start!important;
  }
  .supporters--presenting div, .supporters--project div, .supporters--lead div, .supporters--philanthropic div, .supporters--govt div, .supporters--education div {
    grid-column: 1/-1;
  }
  .supporters--presenting div, .supporters--project div { height: 75px }
  .supporters--lead div, .supporters--philanthropic div, .supporters--govt div, .supporters--education div { height: 55px }
  .supporters--presenting div {
    background: url('../images/presentingpartners_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--project div {
    background: url('../images/majorprojectpartner_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--lead div {
    background: url('../images/leadpatrons_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--philanthropic div {
    background: url('../images/philanthropicpartner_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--govt div {
    background: url('../images/govtpartners_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--education div {
    background: url('../images/educationsupporter_mobile.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  .supporters--text {
    grid-column: 1/-1;
    font: var(--small);
    grid-auto-rows: auto!important;
    padding-right: 0px!important;
  }

  /* specific */

  /* plyr specific */
  .plyr--audio, .plyr--video {
    --plyr-control-spacing: 0;
    --plyr-control-icon-size: 15px;
    --plyr-audio-controls-background: none;
    --plyr-audio-control-color: #000;
    --plyr-audio-control-background-hover: none;
    --plyr-audio-control-color-hover: var(--orange);
    --plyr-audio-progress-buffered-background: #dcdcdc;
    --plyr-range-track-height: 5px;
    --plyr-range-thumb-height: 15px;
    --plyr-range-thumb-background: var(--orange);
    --plyr-range-thumb-active-shadow-width: 0px;
    pointer-events: all;
  }
  .plyr--audio {
    --plyr-color-main: #dcdcdc;
  }
  .plyr--video {
    width: 100%;
    height: auto;
    background: none;
    --plyr-color-main: var(--orange)!important;
    --plyr-video-control-color-hover: var(--orange);
    --plyr-video-control-background-hover: none;
  }
  .plyr__video-wrapper { background: none }
  figure .plyr--video:hover { cursor: pointer }
  figure .plyr--video > .plyr__controls { display: none }
  menu .plyr--video > .plyr__controls { padding: var(--gap) }

  /* collections specific */
  .collection__1 figure:nth-of-type(1){ grid-column: 3 / span 6; grid-row: 1 }
  .collection__1 figure:nth-of-type(2){ grid-column: 1 / span 7; grid-row: 3 }
  .collection__1 figure:nth-of-type(3){ grid-column: 2 / span 7; grid-row: 4 }
  .collection__1 figure:nth-of-type(3) .plyr--video { margin-top: -50px}
  .collection__1 figure:nth-of-type(4){ grid-column: 1 / span 3; grid-row: 1; padding-top: 50px }
  .collection__1 figure:nth-of-type(4) .plyr--video { margin: auto }
  .collection__1 figure:nth-of-type(5) { grid-column: 1 / span 8; grid-row: 2 }

  .collection__2 figure:nth-of-type(1){ grid-column: 1 / span 6 }
  .collection__2 figure:nth-of-type(2){ grid-column: 2 / span 7; grid-row: 3 }
  .collection__2 figure:nth-of-type(3){ grid-column: 1 / span 2; grid-row: 3; padding-top: 325%}
  .collection__2 figure:nth-of-type(3) .plyr--video { margin: auto }
  .collection__2 figure:nth-of-type(4) { grid-column: 1 / span 8; grid-row: 2 }

  .collection__3 figure:nth-of-type(1){ grid-column: 1 / span 6; grid-row: 1 }
  .collection__3 figure:nth-of-type(2){ grid-column: 4 / span 5; grid-row: 1; padding-bottom: 60px; }
  .collection__3 figure:nth-of-type(2) .plyr--video { margin-top: auto;}
  .collection__3 figure:nth-of-type(3){ grid-column: 1 / span 8 }

  .collection__4 figure:nth-of-type(1) { grid-column: 2 / span 7; grid-row: 1 }
  .collection__4 figure:nth-of-type(2) { grid-column: 1 / span 4; grid-row: 4 }
  .collection__4 figure:nth-of-type(2) .plyr--video { margin-top: -50% }
  .collection__4 figure:nth-of-type(3) { grid-column: 1 / span 3; grid-row: 1; padding-top: 20px; padding-right: 3vw; }
  .collection__4 figure:nth-of-type(4) { grid-column: 1 / span 7; grid-row: 3 }
  .collection__4 figure:nth-of-type(5) { grid-column: 5 / span 4; grid-row: 3 }
  .collection__4 figure:nth-of-type(5) img { margin-top: 100% }
  .collection__4 figure:nth-of-type(6) { grid-column: 1 / span 8; grid-row: 2 }

  .collection__5 figure:nth-of-type(1){ grid-column: 1 / span 8 }
  .collection__5 figure:nth-of-type(2){ grid-column: 3 / span 6; grid-row: 3 }
  .collection__5 figure:nth-of-type(3){ grid-column: 1 / span 4; grid-row: 3; padding-top: 50% }
  .collection__5 figure:nth-of-type(3) img { margin: auto }
  .collection__5 figure:nth-of-type(4){ grid-column: 1 / span 8; grid-row: 2 }

  .collection__6 figure:nth-of-type(1){ grid-column: 4 / span 5; grid-row: 3 }
  .collection__6 figure:nth-of-type(2){ grid-column: 7 / span 3; grid-row: 1; z-index: 2 }
  .collection__6 figure:nth-of-type(3){ grid-column: 1 / span 7; grid-row: 1; z-index: 1 }
  .collection__6 figure:nth-of-type(3) .plyr--video { margin-top: 20%; }
  .collection__6 figure:nth-of-type(4){ grid-column: 1 / span 6; grid-row: 3; padding-bottom: 25% }
  .collection__6 figure:nth-of-type(4) .plyr--video { margin-top: auto }
  .collection__6 figure:nth-of-type(5) { grid-column: 1 / span 8 }

  .collection__7 figure:nth-of-type(1){ grid-column: 2 / span 5 }
  .collection__7 figure:nth-of-type(2){ grid-column: 1 / span 7; margin-top: -5% }
  .collection__7 figure:nth-of-type(3){ grid-column: 4 / span 4; margin-top: -60% }

  .collection__8 figure:nth-of-type(1){ grid-column: 1 / span 2; grid-row: 1; z-index: 2 }
  .collection__8 figure:nth-of-type(1) img { margin: auto }
  .collection__8 figure:nth-of-type(2){ grid-column: 2 / span 7; grid-row: 1; z-index: 1 }
  .collection__8 figure:nth-of-type(3){ grid-column: 1 / span 7; grid-row: 3 }
  .collection__8 figure:nth-of-type(4){ grid-column: 4 / span 3; grid-row: 4 }
  .collection__8 figure:nth-of-type(4) .plyr--video { margin-top: -66% }
  .collection__8 figure:nth-of-type(5){ grid-column: 1 / span 8; grid-row: 2 }

  .collection__9 figure:nth-of-type(1){ grid-column: 2 / span 7; grid-row: 1 }
  .collection__9 figure:nth-of-type(2){ grid-column: 3 / span 6 }
  .collection__9 figure:nth-of-type(2) .plyr--video { margin-top: -10% }
  .collection__9 figure:nth-of-type(3){ grid-column: 1 / span 3; grid-row: 2; padding-right: 3vw }
  .collection__9 figure:nth-of-type(3) .plyr--video { margin-top: -76% }
  .collection__9 figure:nth-of-type(4){ grid-column: 1 / span 8; grid-row: 3 }
}

@media screen and (max-height: 800px) and (orientation: landscape) {
  body {
    --blockquote: 15px/1.3 Helvetica, sans-serif;
  }
  .collection figure blockquote {
    font: var(--blockquote);
  }
  .collection figure figcaption {
    padding-top: 6px;
  }
  .collection__1 figure:nth-of-type(2) .plyr--video { margin-bottom: auto; margin-top: 20px }
  .collection__1 figure:nth-of-type(5) { grid-column: 2 / span 6; margin-right:3vw; padding-bottom: 20px }
  .collection__2 figure:nth-of-type(4) { grid-column: 2 / span 6; padding-top: 40px }
  .collection__3 figure:nth-of-type(3) blockquote { padding-top: 50px}
  .collection__4 figure:nth-of-type(6) { grid-column: 2 / span 6; margin-right:3vw; padding-bottom: 20px }
  .collection__5 figure:nth-of-type(1) .plyr--video { margin-bottom: auto; padding-top: 25px;}
  .collection__5 figure:nth-of-type(4){ grid-column: 3 / span 6; margin-top: auto; padding-bottom: 0px;}
  .collection__8 figure:nth-of-type(5) blockquote { margin-top: 50px; }
  .collection__9 figure:nth-of-type(4) blockquote { margin-top: 125px }
}