.hero {
  --hero-padding-y: 4rem;
  --hero-padding-x: 1rem;
  --hero-heading-margin-bottom: 1.5rem;
  --hero-body-margin-bottom: 2rem;
  --hero-container-padding: 0 1rem;
  --hero-container-max-width: 45rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-padding-y) var(--hero-padding-x);
}
.hero__container {
  width: 100%;
  padding: var(--hero-container-padding);
  max-width: var(--hero-container-max-width);
  margin-left: auto;
  margin-right: auto;
}
.hero__heading {
  margin-bottom: var(--hero-heading-margin-bottom);
  width: 100%;
}
.hero__body {
  margin-bottom: var(--hero-body-margin-bottom);
}
.hero--small {
  --hero-padding-y: 2rem;
}
.hero--small .hero__heading {
  --hero-heading-margin-bottom: 1rem;
}
.hero--small .hero__body {
  --hero-body-margin-bottom: 1.5rem;
}
.hero--large {
  --hero-padding-x: 2rem;
  --hero-padding-y: 6rem;
}
.hero--large .hero__heading {
  --hero-heading-margin-bottom: 2rem;
}
.hero--large .hero__body {
  --hero-body-margin-bottom: 2.5rem;
}
.hero--xlarge {
  --hero-padding-y: 8rem;
}
.hero--xlarge .hero__heading {
  --hero-heading-margin-bottom: 2.5rem;
}
.hero--xlarge .hero__body {
  --hero-body-margin-bottom: 3rem;
}
@media (max-width: 991.98px) {
  .hero {
    --hero-padding-y: 3rem;
  }
  .hero--large {
    --hero-padding-y: 4rem;
  }
  .hero--xlarge {
    --hero-padding-y: 5rem;
  }
}
@media (max-width: 767.98px) {
  .hero {
    --hero-padding-y: 2rem;
    min-height: 50vh;
  }
  .hero__container {
    --hero-container-padding: 0 0.5rem;
  }
  .hero__heading {
    --hero-heading-margin-bottom: 1rem;
  }
  .hero__body {
    --hero-body-margin-bottom: 1.5rem;
  }
  .hero--large {
    --hero-padding-y: 3rem;
    min-height: 60vh;
  }
  .hero--xlarge {
    --hero-padding-y: 4rem;
    min-height: 70vh;
  }
}
@media (max-width: 575.98px) {
  .hero {
    --hero-padding-y: 1.5rem;
    min-height: 40vh;
  }
  .hero__heading {
    --hero-heading-margin-bottom: 0.75rem;
  }
  .hero__body {
    --hero-body-margin-bottom: 1rem;
  }
  .hero--large {
    --hero-padding-y: 2rem;
    min-height: 50vh;
  }
  .hero--xlarge {
    --hero-padding-y: 2.5rem;
    min-height: 60vh;
  }
}