/* The artwork scales with the adjacent project description. */
.projects-page .project-entry {
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 64px);
}
.projects-page .project-marker {
  position: relative;
  min-width: 0;
  align-self: stretch;
}
.projects-page .project-marker img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.projects-page .project-number {
  position: absolute;
  left: 0;
  bottom: -25px;
  margin: 0;
}
.projects-page .project-content { min-width: 0; }
.projects-page .project-content h2 { margin: 0 0 16px; }
.projects-page .project-content p { margin: 0 0 14px; }
.projects-page .project-points {
  margin: 0;
  padding-left: 1.3em;
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.projects-page .project-points li + li { margin-top: 5px; }
.projects-page .project-points li::marker { color: var(--accent); }
.projects-page .project-tags { margin: 18px 0; }
.projects-page .project-metric {
  color: var(--accent);
  font-family: Comfortaa, sans-serif;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}
.projects-page .project-snapshot-note {
  margin: 24px 0 0;
  color: #5d625a;
  font-size: 13px;
  line-height: 1.6;
}


/* At tablet and mobile widths, give both the illustration and prose room. */
@media (max-width: 1200px) {
  .projects-page .project-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .projects-page .project-marker {
    width: min(100%, 320px);
    padding-bottom: 22px;
  }
  .projects-page .project-marker img {
    position: static;
    width: 100%;
    height: auto;
  }
  .projects-page .project-number { bottom: 0; }
}