/* Project pages: title, gallery, then supporting text. */
.project-head {
  max-width: var(--wide);
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.project-head h1 {
  max-width: 15ch;
  font-size: clamp(3.25rem, 9vw, 8.5rem);
}

.gallery {
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.project-details {
  display: grid;
  grid-template-columns: minmax(16rem, .8fr) minmax(20rem, 1.2fr);
  column-gap: clamp(2rem, 7vw, 8rem);
  row-gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) var(--gap) var(--section-space);
  border-top: 1px solid var(--line);
}

.project-details-heading {
  align-self: start;
}

.project-details-heading h2 {
  max-width: 17ch;
  margin-top: 1rem;
  font-size: clamp(1.75rem, 3.5vw, 3.25rem);
  line-height: 1.08;
}

.project-details .project-copy {
  display: block;
  align-self: start;
  max-width: 42rem;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.72;
}

.project-details .project-facts {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .project-head {
    padding-top: 1.75rem;
  }

  .project-head h1 {
    font-size: clamp(3rem, 17vw, 5.5rem);
  }

  .project-details {
    grid-template-columns: 1fr;
    padding-top: 3.5rem;
  }

  .project-details .project-facts {
    grid-column: 1;
  }
}