.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);
  height: 100%;
  margin-left: var(--space-x-small-breakpoint-container);
  margin-right: var(--space-x-small-breakpoint-container);
  min-height: var(--min-height-small-breakpoint-hero);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;

  .hero-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: var(--horizontal-alignment-hero);
    padding: var(--space-y-small-breakpoint-hero) var(--space-x-small-breakpoint-hero);
    z-index: 2;

    .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;

      & a {
        color: var(--color-hero-eyebrow-link);
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: var(--background-hero-eyebrow-link);
        padding: var(--space-y-small-breakpoint-hero-eyebrow-link)
          var(--space-x-small-breakpoint-hero-eyebrow-link);
        border-radius: var(--border-radius-hero-eyebrow);

        & svg {
          width: calc(var(--size-small-breakpoint-hero-eyebrow) * 0.75);
          height: calc(var(--size-small-breakpoint-hero-eyebrow) * 0.75);
        }
      }

      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & 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);
      }
    }

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

      & h1,
      & h2,
      & h3,
      & h4,
      & h5,
      & h6,
      & 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);
      }
    }

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

      & p {
        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);
      }
    }

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

    .hero-text + .hero-button {
      display: flex;
      justify-content: var(--horizontal-alignment-hero);
      margin-top: var(--space-y-block-small-breakpoint-hero-button);
      width: 100%;
    }
  }
}

@media (width >= 768px) {
  .hero {
    margin-left: var(--space-x-medium-breakpoint-container);
    margin-right: var(--space-x-medium-breakpoint-container);
    min-height: var(--min-height-medium-breakpoint-hero);

    .hero-inner {
      padding: var(--space-y-medium-breakpoint-hero) var(--space-x-medium-breakpoint-hero);

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

        & a {
          padding: var(--space-y-medium-breakpoint-hero-eyebrow-link)
            var(--space-x-medium-breakpoint-hero-eyebrow-link);

          & svg {
            width: calc(var(--size-medium-breakpoint-hero-eyebrow) * 0.75);
            height: calc(var(--size-medium-breakpoint-hero-eyebrow) * 0.75);
          }
        }

        margin-bottom: var(--space-y-block-medium-breakpoint-hero-eyebrow);
        padding: var(--space-y-medium-breakpoint-hero-eyebrow)
          var(--space-x-medium-breakpoint-hero-eyebrow);
      }

      .hero-headline {
        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & span {
          font-size: var(--size-medium-breakpoint-hero-headline);
          line-height: var(--line-height-medium-breakpoint-hero-headline);
        }
      }

      .hero-text p {
        font-size: var(--size-medium-breakpoint-hero-text);
        line-height: var(--line-height-medium-breakpoint-hero-text);
      }

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

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

@media (width >= 992px) {
  .hero {
    margin-left: var(--space-x-large-breakpoint-container);
    margin-right: var(--space-x-large-breakpoint-container);
    max-width: var(--max-width-container-large);
    min-height: var(--min-height-large-breakpoint-hero);

    .hero-inner {
      padding: var(--space-y-large-breakpoint-hero) var(--space-x-large-breakpoint-hero);

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

        & a {
          padding: var(--space-y-large-breakpoint-hero-eyebrow-link)
            var(--space-x-large-breakpoint-hero-eyebrow-link);

          & svg {
            width: calc(var(--size-large-breakpoint-hero-eyebrow) * 0.75);
            height: calc(var(--size-large-breakpoint-hero-eyebrow) * 0.75);
          }
        }

        margin-bottom: var(--space-y-block-large-breakpoint-hero-eyebrow);
        padding: var(--space-y-large-breakpoint-hero-eyebrow)
          var(--space-x-large-breakpoint-hero-eyebrow);
      }

      .hero-headline {
        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & span {
          font-size: var(--size-large-breakpoint-hero-headline);
          line-height: var(--line-height-large-breakpoint-hero-headline);
        }
      }

      .hero-text p {
        font-size: var(--size-large-breakpoint-hero-text);
        line-height: var(--line-height-large-breakpoint-hero-text);
      }

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

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

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

@media (width >= 1300px) {
  .hero {
    margin-left: auto;
    margin-right: auto;
  }
}