/* Centred heading hierarchy for the school fees page. */
.page-banner .wrap,
.free-fees-hero > div,
.fees-impact article,
.fees-section-heading,
.fee-category header,
.fees-explainer,
.fees-cta {
  text-align: center;
}

.page-banner .breadcrumb,
.free-fees-actions {
  justify-content: center;
}

.page-banner .eyebrow,
.page-banner h1,
.page-banner p,
.free-fees-hero .eyebrow,
.free-fees-hero h2,
.free-fees-hero p,
.fees-section-heading h2,
.fees-section-heading p,
.fees-explainer h2,
.fees-explainer p,
.fees-cta h2,
.fees-cta p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.free-fees-hero > div {
  align-items: center;
}

.fees-section-heading {
  display: block;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.fees-section-heading > div,
.fees-section-heading > p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.fees-explainer {
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.fees-links {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.fees-links a {
  text-align: left;
}

.fees-cta {
  flex-direction: column;
  justify-content: center;
}

.fees-cta .button {
  margin: 0 auto;
}

@media (max-width: 640px) {
  .free-fees-actions {
    width: 100%;
    flex-direction: column;
  }

  .free-fees-actions .button,
  .free-fees-actions .text-link,
  .fees-cta .button {
    width: 100%;
    max-width: 300px;
  }

  .fees-cta .button {
    margin: 22px auto 0;
  }
}