/* Home: 3-up thumbnail grid, one column on mobile. */

#project-thumbs > .wrapper {
  width: 105%;
  margin-left: -5%;
  margin-top: calc(var(--grid-row-gap) * -1);
}

#project-thumbs .project {
  float: left;
  width: var(--grid-col);
  margin-left: var(--grid-gutter);
  margin-top: var(--grid-row-gap);
  cursor: pointer;
  color: var(--ink);
}

/* Three per row: reset the float at the start of each row. */
#project-thumbs .project:nth-child(3n + 1) { clear: left; }

#project-thumbs .project-image {
  background: transparent;
  margin-bottom: var(--grid-row-gap);
  opacity: 1;
  transition: opacity var(--speed) ease;
}
#project-thumbs .project:hover .project-image,
#project-thumbs .project:focus-visible .project-image { opacity: 0.8; }

/* Square crop box; the image fills it and is cropped, never distorted. */
.project-image .intrinsic {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  line-height: 0;
  text-align: center;
}

.project-image .content-fill {
  position: absolute;
  inset: 0;
}

.project-image .content-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#project-thumbs .project-title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* The grid collapses away entirely while a project is open. */
body.page-open #project-thumbs {
  height: 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  #project-thumbs > .wrapper {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
  /* .project is an <a>; without the float it falls back to inline, which
     ignores vertical margins and leaves each caption hugging the next image. */
  #project-thumbs .project {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 12%;
  }
  #project-thumbs .project-image { margin-bottom: 2.5%; }
  #project-thumbs .project-title { text-align: center; }
}

body.route-contact #project-thumbs { display: none; }