.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0 calc(var(--space-7) + var(--space-5));
  text-align: center;
}

/* Fades the mark into the page background instead of ending on a hard edge. */
.hero__image {
  display: block;
  width: auto;
  height: var(--dimension-fluid-lg);
  max-width: 100%;
  object-fit: contain;
  margin-bottom: calc(var(--dimension-fluid-lg) * -0.16);
  -webkit-mask-image: var(--mask-fade-bottom);
  mask-image: var(--mask-fade-bottom);
}

.hero__title {
  margin: 0;
  font: var(--type-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-on-bg);
}

.hero__text {
  margin: var(--space-2-5) 0 0;
  font: var(--type-subtitle);
  color: var(--color-text-on-bg-muted);
}

.hero__text:empty {
  display: none;
}