/* hero
---------------------------------------------*/
.hero {
  --title-font-size: 2.25rem;
  --description-font-size: 1rem;
}
.hero {
  position: relative;
  width: 100%;
}

.hero__inner {
  display: grid;
  height: var(--hero-height, 80dvh);
  overflow: hidden;
}
.hero__inner::after {
  background: var(--hero-overlay-color);
  content: "";
  grid-area: 1/-1;
}

.hero__media {
  grid-area: 1/-1;
  min-height: 0;
}

.hero__image,
.hero__video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.hero__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  grid-area: 1/-1;
  justify-content: center;
  margin-inline: auto;
  padding: 16px;
  text-align: center;
  width: min(100%, var(--container-width));
  z-index: 1;
}

.hero__description, .hero__title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero__title {
  color: var(--hero-title-color, var(--hero-text-color));
  font-size: var(--title-font-size);
  font-weight: 600;
  line-height: 1.2;
}

.hero__description {
  color: var(--hero-description-color, var(--hero-text-color));
  font-size: var(--description-font-size, 1rem);
  margin: 0;
  max-width: 50rem;
}

.hero__button {
  --button-color: var(--ap-color-primary);
  background: var(--button-color);
  border: 1px solid var(--button-color);
  color: var(--button-text-color, var(--ap-color-primary-contrast, var(--ap-color-base)));
  display: inline-block;
  font-size: 1rem;
  padding: 0.5em 1.5em;
  text-decoration: none;
}
.hero__button:hover, .hero__button:focus, .hero__button:active {
  background: #fff;
  color: var(--button-text-color--hover, var(--button-color));
}
@media (min-width: 40em) {
  .hero {
    --title-font-size: 3.25rem;
    --description-font-size: 1.25rem;
  }
}