/* Page hero — the top of an interior page.
 *
 * Text first, then media. Deliberately not a split: an interior hero states
 * what the page is, and a picture beside the statement competes with it.
 */

.pl-page-hero__text {
  max-width: 48rem;
}

.pl-page-hero__title {
  font-size: var(--step-3);
}

.pl-page-hero__intro {
  font-size: var(--step-1);
  line-height: 1.45;
}

.pl-page-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
}

.pl-page-hero__media {
  margin-top: var(--sp-6);
}

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