@import "_functions";
@import "_mixins";
@import "_variables";

.hero__banner__promo {
  display: block;

  @include media-breakpoint-up(lg) {

  }

  .banner-wrapper {
    background: var(--smally-hero-gradient);

    @include media-breakpoint-up(lg) {
      display: flex;
    }
  }

  .chevron {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    transform: translateX(50%);
    height: 100%;

    @include media-breakpoint-up(lg) {
      min-height: 370px;
      top: 50%;
      right: 50px;
      transform: translate(0, -50%);
      display: flex;
      align-items: center;
    }

    svg {
      height: 100%;
      width: 100%;
      opacity: var(--smally-hero-chevron-opacity, 10%);

      path {
        fill: var(--smally-hero-chevron-fill, white);
      }

      @include media-breakpoint-up(lg) {
        height: 110%;
        width: auto;
      }
    }

    &.chevron-desktop {
      display: none;

      @include media-breakpoint-up(lg) {
        display: flex;
        left: 0;
        transform: translate(-2.5%, -50%);
      }
    }
  }

  .wrapper-content {
    order: 1;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 40px;

    @include media-breakpoint-up(md) {
      margin-top: 0;
      background: none;
    }
  }

  .breadcrumb-container,
  .hero_banner-content {
    position: relative;
    z-index: 3;
  }

  .hero_banner-content {
    width: fit-content;

    @include media-breakpoint-up(lg) {
      max-width: 480px;
    }

    .cta-wrapper {
      margin-top: 40px;
      margin-bottom: 0;
      justify-content: center;
    }

    .block-title {
      font-size: 32px;
      line-height: 40px;
      margin-bottom: 20px;
      color: var(--smally-hero-color-header, white);

      @include media-breakpoint-up(lg) {
        font-size: 50px;
        line-height: 63px;
      }
    }

    .hero_banner-body {
      font-size: 18px;
      line-height: 24px;
      color: var(--smally-hero-color, white);
    }
  }
}
