index.scss

$height-md-up: 440px;

.o-commercial-hero-banner {
  @media (min-width: $breakpoint-md) {
    height: $height-md-up;
  }

  &__picture-container {
    position: absolute;
    height: 200px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -10;

    @media (min-width: $breakpoint-md) {
      height: $height-md-up;
    }
  }

  &__text--dark {
    @media (min-width: $breakpoint-md) {
      color: $color-prim-white;
    }
  }

  &__container {
    position: relative;

    @media (min-width: $breakpoint-md) {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.9) 60%,
        #fff 100%
      );
    }

    &--dark {
      @media (min-width: $breakpoint-md) {
        background: linear-gradient(
          270deg,
          rgba(0, 0, 0, 0) 30%,
          rgba(0, 0, 0, 0.8) 60%,
          #000 100%
        );
      }
    }
  }

  &__content {
    display: flex;
    padding: 140px 10px 30px 10px;
    max-height: $height-md-up;
    overflow: hidden;

    @media (min-width: $breakpoint-md) {
      padding: 0;
      background-color: transparent;

      margin: 0;
      height: $height-md-up;
    }

    &-item {
      background-color: $color-prim-white;
      width: 100%;
      word-wrap: break-word;

      @media (min-width: $breakpoint-md) {
        display: flex;
        flex-basis: 50%;
        align-items: center;
        background-color: transparent;
      }
    }

    &-item-box {
      padding: 10px 15px 0 15px;
    }
  }
}