.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);
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background: #fff;
  z-index: 3;

  &::after {
    position: absolute;
    bottom: 0;
    content: '';
    background: linear-gradient(
      90deg,
      #bab8c4 0%,
      rgba(156, 163, 175, 0) 45.82%,
      rgba(156, 163, 175, 0) 50%,
      rgba(156, 163, 175, 0) 54.38%,
      #bab8c4 100%
    );

    width: 100%;
    height: 1px;
    display: block;
  }
  @media (width >= 992px) {
    &::after {
      background: linear-gradient(
        90deg,
        #bab8c4 0%,
        rgba(156, 163, 175, 0) 45.82%,
        rgba(156, 163, 175, 0) 50%,
        rgba(156, 163, 175, 0) 54.38%,
        #bab8c4 100%
      );
    }
  }
  .hero-page-down {
    position: absolute;
    bottom: -20px;
  }

  .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: 3;
    height: 100%;

    .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;
      font-weight: 500;

      & 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,
      & div {
        color: var(--color-hero-eyebrow);
        font-size: var(--size-small-breakpoint-hero-eyebrow);

        line-height: var(--line-height-small-breakpoint-hero-eyebrow);
      }
      & span {
        font-weight: var(--weight-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: 600;
        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%;
      .button {
        position: relative;
        @media (width >= 768px) {
          min-width: 220px;
        }
      }
    }
  }
}

@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);
      padding-top: 70px;

      .hero-eyebrow {
        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & div {
          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 {
        letter-spacing: -3.2px;
        & 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);
      padding-top: 9.375rem;

      .hero-eyebrow {
        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & div {
          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;
  }
}