.gallery-container {
  width: 100%;
  margin-top: 2.5em;
  margin-bottom: 2em;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 1em; */
  /* anchor span prevents margin collapse */
  column-gap: 0.5em;
  row-gap: 1em;
}

.img-size-border {
  width: 100%;
  height: 100%;
  border-radius: 1em;
}

.img-landscape-center,
.img-portrait-center,
.illustration {
  object-fit: cover;
}

.img-landscape-left {
  object-fit: cover;
  object-position: 10% 50%;
}

.img-landscape-right {
  object-fit: cover;
  object-position: 90% 50%;
}

.img-portrait-top {
  object-fit: cover;
  object-position: 50% 10%;
}

.img-portrait-bottom {
  object-fit: cover;
  object-position: 50% 90%;
}

/* on desktop */
@media (min-width: 600px) {
  .picture-frame-landscape {
    height: calc(20vmin + 5vmax);
    width: calc((20vmin + 5vmax) * 1.5);
  }
  .picture-frame-portrait,
  .picture-frame-illustration {
    height: calc(20vmin + 5vmax);
    width: calc(20vmin + 5vmax);
  }
}

/* on mobile */
@media (max-width: 600px) {
  .picture-frame-landscape, .picture-frame-portrait {
    width: calc(100vw - 2rem);
    height: calc(100vw - 2rem);
  }
  .picture-frame-illustration {
    width: 70vw;
    height: 70vw;
  }
  .gallery-container {
    row-gap: 0.5rem;
  }
}

.anchor {
  display: block;
  visibility: hidden;
  transform: translateY(-30vh);
}

/* lightbox */

#grid-cell-prev {
  grid-area: prev;
  z-index: 10;
}

#grid-cell-next {
  grid-area: next;
  z-index: 10;
}

#grid-cell-close {
  grid-area: close;
  z-index: 10;
}

#theater-grid picture,
#theater-grid img {
  margin: auto;
}

/* desktop */
@media (min-aspect-ratio: 3/2) {
  .theater-grid {
    position: fixed;
    /* height: 100vh; */
    inset: 0;
    display: none;
    grid-template-columns: min(10em, 50vw) 1fr 1fr 1fr min(10em, 50vw);
    grid-template-rows: 0 1fr min(10em, 15vh);
    grid-template-areas:
      "logo logo logo logo logo"
      "prev . . . next"
      "prev . close . next";
    place-items: stretch;
    z-index: 5;
    background-color: white;
  }
  #main-image-container {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  #main-image-container picture,
  #main-image-container img {
    max-height: 100vh;
  }
  #grid-cell-logo {
    grid-area: logo;
    display: none;
  }
  #logo-image {
    display: none;
  }
  .gallery-controls {
    height: calc(min(10em, 50vw) * 0.3);
    width: calc(min(10em, 50vw) * 0.3);
  }
}

/* mobile */
@media (max-aspect-ratio: 3/2) {
  .theater-grid {
    position: fixed;
    height: 100dvh;
    inset: 0;
    display: none;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 15vh auto 10vh;
    grid-template-areas:
      "logo logo logo"
      ". . ."
      "prev close next";
    place-items: stretch;
    z-index: 5;
    background-color: white;
  }
  #main-image-container {
    grid-column: 1 / -1;
    grid-row: 2 / -2;
  }
  #main-image-container picture,
  #main-image-container img {
    max-height: 75vh;
  }
  #grid-cell-logo {
    grid-area: logo;
    padding: 1em 1rem;
    z-index: 10;
  }
  #logo-image {
    max-height: 100%;
    max-width: 60%;
  }
  .gallery-controls {
    height: calc(min(20vw * 0.8, 10vh * 0.6));
    width: calc(min(20vw * 0.8, 10vh * 0.6));
  }
}

/* must be last in css file to take precedence */
.show-theater {
  display: grid;
}