.hero {
  // background-color: #F8FAFD;
  background-color: #E7EEFE;

  @include media-breakpoint-up(sm) {
    height: 360px;
  }

  // @include media-breakpoint-up(sm) {
  //   height: 380px;
  // }

  .intro {
    .lead {
      color: #4B5C72;
    }
  }
}

.hero-blue {
  background-color: #30B4FF;
}

.hero-green {
  background-color: #00b936;
}

.hero-small {
  background-color: #E7EEFE;
  border-bottom: 1px solid $color-grey4;

  // @include media-breakpoint-up(xs) {
  //   height: 320px;
  // }
  //
  // @include media-breakpoint-up(lg) {
  //   height: 300px;
  // }

  .intro {
    .lead {
      color: #4B5C72;
    }
  }
}