.project {
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.project-header {
  padding-top: 0;
  margin-bottom: 3rem;
  padding-left: 0.5rem;
}
.project-date {
  color: var(--color-text-grey);
}
figure.large {
  width: 100%;
}

figure.medium {
  width: 75%;
}

figure.small {
  width: 50%;
}

figure.xsmall {
  width: 25%;
}

.project figure {
  padding: 0.5rem;
}

.project p {
  width: 100%;
  margin: 2rem auto;
  padding: 0.5rem 25%;
}

.project p, .project p a {
  font-size: var(--standard-text);
  line-height: var(--leading);
  letter-spacing: var(--kerning);
}

.project p a {
  text-decoration: underline;
}

.project-cover {
  width: 100%;
}

.project-header h3 {
  width: 33.33%;
  min-width: 40rem;
  font-size: var(--standard-text);
  line-height: var(--leading);
  letter-spacing: var(--kerning);
}

h1 {
  font-size: var(--headline);
  line-height: var(--leading);
}

h2 {
  font-size: var(--subheadline);
  margin: 1rem 0;
}

h3, h4, h5, h6, .h3 {
  font-size: var(--standard-text);
  line-height: var(--lineheight);
  letter-spacing: var(--leading);
}

/* .credits, .project-title {
  margin-bottom: 1rem;
} */

span.credits p {
  margin: 0 0 0 1rem;
  width: auto;
  padding: 0;
  font-size: var(--subheadline);
}
span.credits p a {
  font-size: var(--subheadline);
}

.project-header p {
  padding: 0;
  margin: 1rem 0;
}

@media screen and (max-width: 600px) {
  .project-header h3 {
    width: 100%;
    min-width: 0;
  }

  .project p {
    padding: 0.5rem;
  }

  figure.xsmall, figure.small, figure.medium, figure.large {
    width: 100%;
  }

  .project {
    margin-bottom: 4rem;
  }
}