$mobile-height: 300px;
$above-mobile-height: 480px;

.tui-hero {
  @extend %flexbox-column;
  justify-content: flex-end;
  align-items: flex-start;
  height: $mobile-height;
  position: relative;
  background: none;

  @include breakpoint(sm) {
    height: 373px;
    justify-content: center;
  }

  @include breakpoint(md) {
    height: $above-mobile-height;
    margin-top: 0;
    padding: 77px 0;
  }

  > .container {
    margin: 0;
    padding: 0;

    @include breakpoint(sm) {
      margin: 0 auto;
    }
  }

  .hero-text-container {
    overflow: hidden;
  }

  .tui-hero-image {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 100%;

    img {
      display: inline-block;
      position: absolute;
      top: -50%;
      bottom: -50%;
      left: -50%;
      right: -50%;
      margin: auto;
      width: auto;
      z-index: 1;
      height: 100%;

      @media only screen and (min-width: 461px) {
        width: 768px;
      }

      @media only screen and (min-width: 769px) {
        width: 992px;
        height: 373px;
      }

      @media only screen and (min-width: 993px) {
        width: 1200px;
        height: 480px;
      }

      @media only screen and (min-width: 1201px) {
        width: 1440px;
      }

      @media only screen and (min-width: 1441px) {
        width: 1920px;
      }

      @media only screen and (min-width: 1921px) {
        width: 100%;
        height: auto;
      }
    }

    @include breakpoint(md) {
      height: $above-mobile-height;
    }
  }

  .tui-text-in-image {
    margin: 0 0 $margin-normal;
    z-index: 2;

    a:hover {
      text-decoration: none;
    }

    @include breakpoint(md) {
      max-width: 75%;
      min-width: 25%;
    }
  }

  &.variation-b {
    .hero-text-container {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: auto;
      z-index: 1;
      background: linear-gradient(to bottom, rgba($color-beige-100, 0) 0%, rgba($color-beige-100, 1) 70%);

      @include breakpoint(md) {
        background: linear-gradient(to bottom, rgba($color-beige-100, 0) 0%, rgba($color-beige-100, 1) 60%);
      }
    }

    .tui-text-in-image {
      @extend %tui-container-width;
      max-width: 100%;
      padding: 0 $margin-normal $margin-normal;
      display: block;

      @include breakpoint (md) {
        padding: $margin-quintuple 0 $margin-normal;
      }

      a {
        @extend %flexbox-column;
        /* stylelint-disable max-nesting-depth */
        @include breakpoint(md) {
          flex-direction: row;
          align-items: flex-end;
        }
        /* stylelint-enable */
      }

      h1,
      h2 {
        margin: 0;
      }
    }

    .text {
      margin: 0 0 $margin-normal;

      @include breakpoint(md) {
        margin: 0 $margin-triple 0 0;
      }
    }

    h1,
    h2 {
      color: $color-blue-500;
      text-shadow: none;
      text-transform: none;
      padding: 0;
      margin: 0 0 $margin-normal;
    }

    .tui-call-to-action {
      padding: 0;
    }

    .btn {
      margin: 0;
      padding: $margin-half $margin-double;
      width: 100%;

      @include breakpoint(md) {
        padding: $margin-normal $margin-quadruple;
      }
    }
  }
}

.cta-startpage-button {
  transition: max-width .2s ease-out;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;

  .cta-startpage-button-loader {
    display: none;
  }

  .sub-cta-text,
  .first-cta-tex {
    display: block;
  }

  &-loading {
    max-width: 120px;
    max-height: 66px;
    background-image: url(/cdn/img/loaders/oval.svg);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    pointer-events: none;

    .first-cta-text {
      max-height: 54px;
    }

    .sub-cta-text,
    .first-cta-text {
      visibility: hidden;
    }

    .sub-cta-text:empty {
      display: none;
    }

    .cta-startpage-button-loader {
      display: block;
    }
  }

  &-grow {
    max-height: 66px;
    max-width: 500px;

    .sub-cta-text,
    .first-cta-text {
      visibility: hidden;
    }
  }
}

.hero-cta-price:empty {
  display: none;
}

.sub-cta-text {
  font-size: 1.5rem;
  text-transform: initial;
  font-weight: normal;
}