/* Align the features heading and description at the right content edge. */
body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > div > h2 {
  align-items: flex-end;
  text-align: right;
}

body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > p.brand-resonance-value__lead-copy {
  justify-self: end;
  width: min(100%, 440px);
  margin: 0;
  padding: 0;
}

@media (min-width: 821px) {
  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
    grid-template-rows: 1fr auto;
    align-items: end;
    column-gap: clamp(42px, 5vw, 82px);
    row-gap: 28px;
  }

  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > div {
    display: contents;
  }

  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > div > p.value-design-wordmark {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
  }

  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > div > h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > p.brand-resonance-value__lead-copy {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Align the website features title with the left edge on the stacked mobile layout. */
@media (max-width: 820px) {
  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading > div > h2 {
    align-items: flex-start;
    text-align: left;
  }
}

/* Keep the longer website title readable within the same heading column. */
body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading .brand-resonance-value__formula {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .2em;
  white-space: normal;
}

body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading .brand-resonance-value__formula > span {
  white-space: nowrap;
}

@media (max-width: 820px) {
  body.service-website-page:not(.service-school-page).top-editorial .value-design-match .movie-features__header.value-interviewer-heading .brand-resonance-value__formula {
    justify-content: flex-start;
  }
}