/* ===== Gallery page ===== */

#galleryHeader {
  width: 70vw;
  flex-direction: row;
  align-items:stretch;
  justify-content: space-evenly;
  text-align: center;
  padding: 1.2vw 2vw;
  margin-top: 1vw;
}

#galleryHeader .backLink {
  align-self: flex-start;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

#galleryHeader .backLink:hover {
  text-decoration: underline;
}

/* The grid itself needs to override the site-wide `div { display: flex }`
   rule and be positioned, since Masonry lays out .grid-item children by
   giving each one an absolute `top`/`left` and then sets this container's
   height to match - it needs a positioned parent to measure against. */
#galleryGrid {
  display: block;
  position: relative;
  width: 90%;
  margin: 1vw auto 2vw auto;
}

/* .grid-sizer/.gutter-sizer are invisible - Masonry only reads their
   computed widths to work out the column width and the gap between
   columns. 4 columns: (22% * 4) + (4% gutter * 3 gaps) = 100%. */
.grid-sizer,
.grid-item {
  width: 22%;
}

.gutter-sizer {
  width: 4%;
}

.grid-item {
  display: block;
  width: 22%;
  margin-bottom: 1.5vw;
  border-radius: 1vw;
  box-shadow: inset 2px 3px 6px var(--white), inset -2px -3px 6px var(--aero-dark), 4px 6px 5px var(--aero-dark), 0 0 5px var(--aero-dark);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
  transform: scale(1.02);
  box-shadow: inset 3px 4px 7px var(--white), inset -3px -4px 7px var(--aero-emo), 5px 7px 6px var(--aero-emo), 0 0 6px var(--aero-emo);
}

/* Fewer columns as things narrow, still no reliance on fixed px sizes */
@media (max-width: 700px) {

  .grid-sizer,
  .grid-item {
    width: 47%;
  }

  .gutter-sizer {
    width: 6%;
  }
}

@media (max-width: 420px) {

  .grid-sizer,
  .grid-item {
    width: 100%;
  }

  .gutter-sizer {
    width: 0%;
  }
}