/* Projects grid — M17.
 *
 * Unlike the range grid this one is gapped rather than hairline-framed: these
 * are photographs, and a frame around a photograph competes with it. The
 * captions carry the structure instead.
 */

.pl-projects__label {
  margin-bottom: var(--sp-4);
}

.pl-projects__grid {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 48rem) {
  .pl-projects__grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.pl-projects__item img {
  width: 100%;
  border: var(--rule) solid var(--c-rule);
}

.pl-projects__caption {
  padding-top: var(--sp-1);
  font-size: 0.78125rem;
  color: var(--c-text-muted);
}

/* The section opener: a small label, a real heading, or both. A heading is the
 * better opener wherever the page needs a heading structure — the homepage
 * does — and the label alone is right where it does not. */
.pl-projects__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.pl-projects__title-head {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  max-width: 20ch;
}