.page {
  display: flex;
  flex-direction: column;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
  max-width: var(--maxWidth);
  padding: 1rem 0.75rem;
}

.hero {
  /* fallback, mainly visible when hero image is loading */
  background-color: var(--colorSecondary);
  /* fallback when there is no hero image */
  background:
    radial-gradient(
      ellipse at 50% 50%,
      color(var(--colorSecondary) l(+ 10%)) 15%,
      var(--colorSecondary) 70%
    );
}

.header {
  display: flex;
  flex-direction: column;
  padding: 5rem 0;
  padding: 10vh 0;
  text-align: center;
  background: linear-gradient(
    to bottom,
    var(--colorPrimaryDark),
    color(var(--colorPrimary) a(0.2))
  );
}

.heading {
  color: var(--colorNeutralLight);
  text-shadow:
    0 0 10px var(--colorPrimaryDark),
    0 0 6px var(--colorNeutralDark),
    0 0 2px var(--colorNeutralDark)
  ;
  letter-spacing: 1px;
}

.cta {
  margin-top: 2rem;
}

.pageContent {
  margin: 1rem 0;
}

.body {
  & a {
    color: var(--colorPrimary);
    transition: all 0.2s;
    text-decoration: none;
    border-bottom: 1px solid transparent;

    &:hover {
      opacity: 1;
      color: color(var(--colorPrimary) l(- 5%));
      border-bottom-color: var(--colorPrimary);
    }
  }

  /* handy for content */
  & img {
    max-width: 100%;
  }
}