//mobile
.it-hero-wrapper {
  min-height: $hero-height-mob;
  position: relative;
  background-color: $hero-bg-color;
  display: flex;
  align-items: flex-end;
  // Img -------------------------------------------
  .img-responsive-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    .img-responsive {
      padding-bottom: inherit;
      height: 100%;
      position: initial;
    }
  }
  // small size --------------------------------
  &.it-hero-small-size {
    min-height: $hero-height-sm-mob;
  }
  // Text container ----------------------------
  .it-hero-text-wrapper {
    padding: 3rem 0.75rem;
    background: transparent !important;
    position: relative;

    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      color: $hero-text-color;
      margin-bottom: $v-gap * 3;
    }
    .it-category {
      display: block;
      font-size: $hero-cat-size;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: $v-gap;
    }
    h1 {
      font-size: $hero-heading-size;
    }
    p {
      font-size: $hero-p-size;
      font-family: $font-family-serif;
    }
    .it-btn-container {
      margin-top: 1.5rem;
    }
  }
  // Small size container ----------------------------
  &.it-hero-small-size .it-hero-text-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  // Text container centered----------------------------
  &.it-text-centered .it-hero-text-wrapper {
    margin: 0 auto;
    text-align: center;
  }
  // overlay color--------------------------------------
  &.it-overlay {
    .img-responsive-wrapper {
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    // dark overlay
    &.it-dark {
      .img-responsive-wrapper {
        &:after {
          background: $hero-dark-bg;
        }
      }
    }
    // dark overlay
    &.it-primary {
      .img-responsive-wrapper {
        &:after {
          background: $hero-primary-bg;
        }
      }
    }
    // filter
    &.it-filter {
      .img-responsive-wrapper {
        img {
          mix-blend-mode: screen;
        }
        &:after {
          display: none;
        }
      }
    }
  }
  // negative bottom
  &.it-bottom-overlapping-content {
    margin-bottom: -$hero-negative-margin;
    .it-hero-text-wrapper {
      padding-bottom: $hero-negative-bottom-padding-mob;
    }
  }

  &.it-wrapped-container {
    min-height: 0 !important; // disable prev min-height
    align-items: flex-end;
  }

  .it-hero-card {
    background-color: $white;

    &.it-hero-bottom-overlapping {
      position: relative;
      margin-top: $hero-negative-margin;
      margin-bottom: -$hero-negative-margin;
    }
  }
}

// for mobile only
@media (max-width: #{map-get($grid-breakpoints, sm) - 1}) {
  .it-hero-wrapper {
    &.it-wrapped-container {
      display: flex;
      flex-direction: column;

      .container {
        background-color: $white;
      }

      .img-responsive-wrapper {
        position: relative;

        .img-wrapper {
          position: relative;
        }

        &:after {
          content: none;
        }
      }

      .it-hero-card {
        background-color: $white;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
    }

    .it-hero-card {
      &.it-hero-bottom-overlapping {
        margin: 0;
      }
    }
  }
}

//small - tablet
@include media-breakpoint-up(sm) {
  .it-hero-wrapper {
    &.it-wrapped-container {
      min-height: 0 !important; // disable prev min-height
      align-items: flex-end;
    }

    .it-hero-card {
      background-color: $white;

      &.it-hero-bottom-overlapping {
        margin-top: $hero-negative-margin;
        margin-bottom: -$hero-negative-margin;
      }
    }
  }
}

//Tablet vertical
@include media-breakpoint-up(md) {
  .it-hero-wrapper {
    // img small size --------------------------------
    &.it-hero-small-size {
      min-height: $hero-height-sm-tab;
    }
  }
}

// Tablet horizontal / small desktop
@include media-breakpoint-up(lg) {
  .it-hero-wrapper {
    position: relative;
    min-height: $hero-height-desk;
    align-items: center;
    // img small size --------------------------------
    &.it-hero-small-size {
      min-height: $hero-height-sm-desk;
    }
    // Text container ----------------------------
    .it-hero-text-wrapper {
      padding: $v-gap * 12 0;
      max-width: 50vw;

      h1 {
        font-size: $hero-heding-size-desk;
      }
    }

    // negative bottom
    &.it-bottom-overlapping-content {
      margin-bottom: -$hero-negative-margin-desk;
      .it-hero-text-wrapper {
        padding-bottom: $hero-negative-bottom-padding * 2;
      }
      & .card-wrapper {
        .card-body {
          padding-top: 48px;
        }
      }
    }
  }
}

//Tablet horizontal / small desktop
@include media-breakpoint-up(xxl) {
  .it-hero-wrapper {
    // negative bottom
    &.it-bottom-overlapping-content {
      & + .container {
        .card-wrapper {
          .card-body {
            padding-top: $card-padding * 2.5;
          }
        }
      }
    }
  }
}