.hero {
  background: var(--background-hero);
  border-color: var(--border-color-hero);
  border-radius: var(--border-radius-hero);
  border-style: solid;
  border-width: var(--border-width-hero);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  min-height: var(--min-height-small-breakpoint-hero);
}

@media (min-width: 768px) {
  .hero {
    min-height: var(--min-height-medium-breakpoint-hero);
  }
}

@media (min-width: 1200px) {
  .hero {
    min-height: var(--min-height-large-breakpoint-hero);
  }
}

.hero .hero-inner {
  align-items: var(--horizontal-alignment-hero);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: var(--space-small-breakpoint-container);
  margin-right: var(--space-small-breakpoint-container);
  padding: var(--space-y-small-breakpoint-hero)
    var(--space-x-small-breakpoint-hero);
  position: relative;
}

@container (width >=768px) {
  .hero .hero-inner {
    margin: 0 var(--space-medium-breakpoint-container) 0
      var(--space-medium-breakpoint-container);
  }
}

@container (width >=1200px) {
  .hero .hero-inner {
    margin-left: var(--space-large-breakpoint-container);
    margin-right: var(--space-large-breakpoint-container);
    max-width: var(--max-width-container-large);
  }
}

@container (width >=1400px) {
  .hero .hero-inner {
    max-width: var(--max-width-container-extralarge);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner {
    padding: var(--space-y-medium-breakpoint-hero)
      var(--space-x-medium-breakpoint-hero);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner {
    padding: var(--space-y-large-breakpoint-hero)
      var(--space-x-large-breakpoint-hero);
  }
}

.hero .hero-inner .hero-eyebrow {
  background: var(--background-hero-eyebrow);
  border-color: var(--border-color-hero-eyebrow);
  border-radius: var(--border-radius-hero-eyebrow);
  border-style: solid;
  border-width: var(--border-width-hero-eyebrow);
  display: inline-flex;
  margin-bottom: var(--space-y-block-small-breakpoint-hero-eyebrow);
  padding: var(--space-y-small-breakpoint-hero-eyebrow)
    var(--space-x-small-breakpoint-hero-eyebrow);
  width: fit-content;
}

.hero .hero-inner .hero-eyebrow a {
  color: var(--color-hero-eyebrow-link);
}

.hero .hero-inner .hero-eyebrow h1,
.hero .hero-inner .hero-eyebrow h2,
.hero .hero-inner .hero-eyebrow h3,
.hero .hero-inner .hero-eyebrow h4,
.hero .hero-inner .hero-eyebrow h5,
.hero .hero-inner .hero-eyebrow h6,
.hero .hero-inner .hero-eyebrow span {
  color: var(--color-hero-eyebrow);
  font-size: var(--size-small-breakpoint-hero-eyebrow);
  font-weight: var(--weight-hero-eyebrow);
  line-height: var(--line-height-small-breakpoint-hero-eyebrow);
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-eyebrow h1,
  .hero .hero-inner .hero-eyebrow h2,
  .hero .hero-inner .hero-eyebrow h3,
  .hero .hero-inner .hero-eyebrow h4,
  .hero .hero-inner .hero-eyebrow h5,
  .hero .hero-inner .hero-eyebrow h6,
  .hero .hero-inner .hero-eyebrow span {
    line-height: var(--line-height-medium-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-eyebrow h1,
  .hero .hero-inner .hero-eyebrow h2,
  .hero .hero-inner .hero-eyebrow h3,
  .hero .hero-inner .hero-eyebrow h4,
  .hero .hero-inner .hero-eyebrow h5,
  .hero .hero-inner .hero-eyebrow h6,
  .hero .hero-inner .hero-eyebrow span {
    line-height: var(--line-height-large-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-eyebrow h1,
  .hero .hero-inner .hero-eyebrow h2,
  .hero .hero-inner .hero-eyebrow h3,
  .hero .hero-inner .hero-eyebrow h4,
  .hero .hero-inner .hero-eyebrow h5,
  .hero .hero-inner .hero-eyebrow h6,
  .hero .hero-inner .hero-eyebrow span {
    font-size: var(--size-medium-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-eyebrow h1,
  .hero .hero-inner .hero-eyebrow h2,
  .hero .hero-inner .hero-eyebrow h3,
  .hero .hero-inner .hero-eyebrow h4,
  .hero .hero-inner .hero-eyebrow h5,
  .hero .hero-inner .hero-eyebrow h6,
  .hero .hero-inner .hero-eyebrow span {
    font-size: var(--size-large-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-eyebrow {
    padding: var(--space-y-medium-breakpoint-hero-eyebrow)
      var(--space-x-medium-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-eyebrow {
    padding: var(--space-y-large-breakpoint-hero-eyebrow)
      var(--space-x-large-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-eyebrow {
    margin-bottom: var(--space-y-block-medium-breakpoint-hero-eyebrow);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-eyebrow {
    margin-bottom: var(--space-y-block-large-breakpoint-hero-eyebrow);
  }
}

.hero .hero-inner .hero-headline {
  font-family: var(--font-text);
  text-align: var(--horizontal-alignment-hero);
}

.hero .hero-inner .hero-headline h1,
.hero .hero-inner .hero-headline h2,
.hero .hero-inner .hero-headline h3,
.hero .hero-inner .hero-headline h4,
.hero .hero-inner .hero-headline h5,
.hero .hero-inner .hero-headline h6,
.hero .hero-inner .hero-headline span {
  color: var(--color-hero-headline);
  display: block;
  font-size: var(--size-small-breakpoint-hero-headline);
  font-weight: var(--weight-hero-headline);
  line-height: var(--line-height-small-breakpoint-hero-headline);
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-headline h1,
  .hero .hero-inner .hero-headline h2,
  .hero .hero-inner .hero-headline h3,
  .hero .hero-inner .hero-headline h4,
  .hero .hero-inner .hero-headline h5,
  .hero .hero-inner .hero-headline h6,
  .hero .hero-inner .hero-headline span {
    line-height: var(--line-height-medium-breakpoint-hero-headline);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-headline {
    margin-top: 0.625rem;
    margin-bottom: 0.3125rem;
  }
  .hero .hero-inner .hero-headline h1,
  .hero .hero-inner .hero-headline h2,
  .hero .hero-inner .hero-headline h3,
  .hero .hero-inner .hero-headline h4,
  .hero .hero-inner .hero-headline h5,
  .hero .hero-inner .hero-headline h6,
  .hero .hero-inner .hero-headline span {
    line-height: var(--line-height-large-breakpoint-hero-headline);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-headline h1,
  .hero .hero-inner .hero-headline h2,
  .hero .hero-inner .hero-headline h3,
  .hero .hero-inner .hero-headline h4,
  .hero .hero-inner .hero-headline h5,
  .hero .hero-inner .hero-headline h6,
  .hero .hero-inner .hero-headline span {
    font-size: var(--size-medium-breakpoint-hero-headline);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-headline h1,
  .hero .hero-inner .hero-headline h2,
  .hero .hero-inner .hero-headline h3,
  .hero .hero-inner .hero-headline h4,
  .hero .hero-inner .hero-headline h5,
  .hero .hero-inner .hero-headline h6,
  .hero .hero-inner .hero-headline span {
    font-size: var(--size-large-breakpoint-hero-headline);
  }
}

.hero .hero-inner .hero-text {
  text-align: var(--horizontal-alignment-hero);
}

.hero .hero-inner .hero-text p,
.hero .hero-inner .hero-text li,
.hero .hero-inner .hero-text a {
  color: var(--color-hero-text);
  font-size: var(--size-small-breakpoint-hero-text);
  font-weight: var(--weight-hero-text);
  line-height: var(--line-height-small-breakpoint-hero-text);
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-text p,
  .hero .hero-inner .hero-text li,
  .hero .hero-inner .hero-text a {
    line-height: var(--line-height-medium-breakpoint-hero-text);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-text p,
  .hero .hero-inner .hero-text li,
  .hero .hero-inner .hero-text a {
    line-height: var(--line-height-large-breakpoint-hero-text);
  }
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-text p,
  .hero .hero-inner .hero-text li,
  .hero .hero-inner .hero-text a {
    font-size: var(--size-medium-breakpoint-hero-text);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-text p,
  .hero .hero-inner .hero-text li,
  .hero .hero-inner .hero-text a {
    font-size: var(--size-large-breakpoint-hero-text);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-text p a::before,
  .hero .hero-inner .hero-text li a::before,
  .hero .hero-inner .hero-text a a::before {
    background: var(--color-dark-sections-icon);
  }
}

.hero .hero-inner .hero-headline + .hero-text {
  margin-top: var(--space-y-block-small-breakpoint-hero-text);
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-headline + .hero-text {
    margin-top: var(--space-y-block-medium-breakpoint-hero-text);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-headline + .hero-text {
    margin-top: var(--space-y-block-large-breakpoint-hero-text);
  }
}

.hero .hero-inner .hero-text + .hero-button {
  margin-top: var(--space-y-block-small-breakpoint-hero-button);
}

@media (min-width: 768px) {
  .hero .hero-inner .hero-text + .hero-button {
    margin-top: var(--space-y-block-medium-breakpoint-hero-button);
  }
}

@media (min-width: 1200px) {
  .hero .hero-inner .hero-text + .hero-button {
    margin-top: var(--space-y-block-large-breakpoint-hero-button);
  }
}