.content-page {
  padding-bottom: var(--spacing-14);
}

.content-page-title-container {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

.page-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-family: var(--font-brand);
  text-transform: capitalize;
  font-weight: 400;
}

.content-page-html p:has(+ h2),
.content-page-html ul {
  margin-bottom: var(--spacing-9);
}

.content-page-html h2,
.content-page-html h3 {
  margin-bottom: var(--spacing-4);
}

.content-page-html h2 {
  font-size: var(--text-xl);
  line-height: 1.4;
}

.content-page-html h3 {
  font-size: var(--text-lg);
  line-height: 1.4;
}

@media screen and (min-width: 48rem) {
  .content-page {
    padding-bottom: calc(var(--spacing-14) * 2);
  }

  .page-title {
    font-size: var(--text-5xl);
  }

  .content-page-html h2 {
    font-size: var(--text-4xl);
  }

  .content-page-html h3 {
    font-size: var(--text-2xl);
  }

  .content-page-article {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
    max-width: var(--container-default);
  }
}

@media screen and (min-width: 64rem) {
  .content-page-title {
    padding-top: 50px;
    background-image: url(/assets/page-bg.webp);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100%;
    min-height: 700px;
    margin-bottom: -420px;
  }

  .page-title {
    font-size: var(--text-72);
  }
}