/*
  Formula for calculating grid-template-rows:
  calc((grid_width - (column_gap_size * column_gap_number)) / column_number * aspect_ratio);
*/

/*
  Resilience vs Expanding
*/

.gallery-resilience {
  display: grid;
  margin-bottom: 24px;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, calc((800px - (10px * 3)) / 4 * 1.5));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(2, calc((100vw - (10px * 2) + (5px * 2)) / 3 * 1.5));
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-resilience a:nth-child(6),
.gallery-resilience a:nth-child(7) {
  @media (max-width: 840px) {
    display: none;
  }
}

.gallery-resilience-show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, calc((800px - (10px * 2)) / 3 * 1.5));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, calc((100vw - (10px * 1)) / 2 * 1.5));
  }
}

/*
  Six Word Story
*/

.gallery-six-word-story {
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: calc((800px - (10px * 2)) / 3 * 1.5);
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: calc((100vw - (10px * 2) + (5px * 2)) / 3 * 1.5);
    column-gap: 5px;
    row-gap: 5px;
  }
}


.gallery-six-word-story-show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, calc((800px - (10px * 2)) / 3 * 1.5));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, calc((100vw - (5px * 1)) / 2 * 1.5));
    column-gap: 5px;
    row-gap: 5px;
  }
}

/*
  Alphagetti
*/

.gallery-alphagetti {
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: calc((800px - (10px * 2)) / 3 * 1.5);
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-rows: calc((100vw - (10px * 2) + (5px * 2)) / 3 * 1.5);
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-alphagetti-show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: calc((800px - (10px * 2)) / 3 * 1.5) calc(800px * 0.41);
  column-gap: 10px;
  row-gap: 10px;

   @media (max-width: 840px) {
    grid-template-rows: calc((100vw - (5px * 2)) / 3 * 1.5) calc(100vw * 0.41);
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-alphagetti-show a:last-child {
  grid-column: span 3;
}

/*
  Obliq
*/

.gallery-obliq {
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, calc((800px - (10px * 1)) / 2 * 0.8));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, calc((100vw - (5px * 1)) / 2 * 0.8));
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-obliq a:nth-child(1), .gallery-obliq a:nth-child(4) {
  grid-column: span 2;
}

.gallery-obliq-show {
  display: grid;
  row-gap: 10px;

  @media (max-width: 840px) {
    row-gap: 5px;
  }
}

/*
  Vanier Style Guide
*/

.gallery-vanier-style-guide {
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, calc((800px - (10px * 1)) / 2 * 0.65));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-rows: repeat(2, calc((100vw - (5px * 1)) / 2 * 0.65));
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-vanier-style-guide-show {
  display: grid;
  row-gap: 10px;

  @media (max-width: 840px) {
    row-gap: 5px;
  }
}

/*
  FME Iced Tea
*/

.gallery-fme-iced-tea {
  display: grid;
  margin-bottom: 24px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, calc((800px - (10px * 1)) / 2 * 0.66));
  column-gap: 10px;
  row-gap: 10px;

  @media (max-width: 840px) {
    grid-template-rows: repeat(2, calc((100vw - (5px * 1)) / 2 * 0.66));
    column-gap: 5px;
    row-gap: 5px;
  }
}

.gallery-fme-iced-tea-show {
  display: grid;
  row-gap: 10px;

  @media (max-width: 840px) {
    row-gap: 5px;
  }
}