main {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  width: 100%;
}

main {
  background-color: var(--color-background);
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: 2em;
}

main > article {
  --h1-font-size: 300%;
  --h2-font-size: 125%;
  --h3-font-size: 118.75%;
  --line-height: 1.5;
  line-height: var(--line-height);
  max-width: var(--page-max-width);
  width: 100%;
}

@media (min-width: 64rem) {
  main > article {
    --h1-font-size: 400%;
    --h2-font-size: 150%;
  }
}

main > article > header {
  padding: 3em 0 1em 0;
}

main > article > header h1,
main > article > header h2 {
  line-height: 1;
  margin: 0;
}

@supports (background-clip: text) {
  main > article > header h1 {
    background-clip: text;
    background-image: linear-gradient(
      var(--brand-gradient-angle),
      var(--color-primary),
      var(--color-text),
      var(--color-secondary)
    );
    color: transparent;
  }
}

main > article h1 {
  display: inline;
  font-size: var(--h1-font-size);
}

main > article h2 {
  font-size: var(--h2-font-size);
}

main > article h3 {
  font-size: var(--h3-font-size);
}

main > article > header h2 {
  font-weight: normal;
  margin-top: 0.5em;
}

main > .center-content {
  align-items: center;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}