.gallery {
  margin: var(--first-section-top-margin) var(--section-margin);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(35rem, 100%), 40rem));
  grid-template-rows: auto 1fr auto;
  grid-auto-rows: auto 1fr auto;
  justify-content: center;
  align-items: start;

  min-width: 0;

  gap: var(--size-2);

  font-size: var(--font-size-2);

  @media (max-width: 80rem) {
    grid-template-rows: auto auto auto;
    grid-auto-rows: auto auto auto;
  }
}

.gallery-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  grid-row: span 3;
  gap: var(--size-1);

  min-width: 0;
  width: 100%;

  padding-inline: var(--size-2);
  padding-block: var(--size-2);

  background-color: var(--default-background);
  border: var(--border-color) var(--border-width-3) ridge;

  figure {
    margin: 0;
  }

  :has(video) {
    grid-row: 2;
    justify-self: center;
    align-self: start;

    video {
      border: var(--border-color) var(--border-width-1) solid;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: 38rem;
      width: auto;
      height: auto;
      object-fit: contain;
    }
  }

  .image-slides {
    display: grid;
    /* this may or may not affect the iOS/Safari issue where images are super tiny. need to test */
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* grid-template-columns: auto auto auto; */
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-items: center;

    column-gap: var(--size-1);

    min-height: 0;

    > figure {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;

      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 0;
      min-height: 0;
    }

    > img {
      grid-column: 2;
      grid-row: 1;
    }

    > figcaption {
      grid-column: 2;
      grid-row: 2;

      min-width: 0;
      whitespace: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    > button {
      grid-row: 1 / span 2;
      align-self: center;
    }

    @media (max-width: 50em) {
      > img {
        grid-column: 1 / -1;
        justify-self: center;
      }
      > figcaption {
        grid-column: 2;
      }
      > button {
        grid-row: 2;
      }
      > button:first-of-type  { grid-column: 1; }
      > button:last-of-type   { grid-column: 3; }
    }

  }

  figcaption {
    font-size: var(--font-size-2);
    text-align: center;
    font-weight: bold;
    padding-inline: var(--size-1);
    padding-block-start: var(--size--2);
    min-height: calc(1lh + var(--size-1));
  }

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
    min-height: 0;

    border: var(--border-color) var(--border-width-1) solid;
  }
}