.hero {
  height: 300px;
  position: relative;
  background-size: cover;

  @media (min-width: $screen-xs) {
    height: 350px;
  }
  @media (min-width: $screen-sm) {
    height: 400px;
  }
  @media (min-width: $screen-md) {
    height: 450px;
  }
  @media (min-width: $screen-lg) {
    height: 500px;
  }
  @media (min-width: $screen-xl) {
    height: 650px;
  }
  @media (min-width: $screen-xxl) {
    height: 900px;
  }

  &.hero-sm {
    height: 200px;

    @media (min-width: $screen-xs) {
      height: 250px;
    }
    @media (min-width: $screen-sm) {
      height: 300px;
    }
    @media (min-width: $screen-md) {
      height: 350px;
    }
    @media (min-width: $screen-lg) {
      height: 450px;
    }
    @media (min-width: $screen-xl) {
      height: 500px;
    }
    @media (min-width: $screen-xxl) {
      height: 600px;
    }
  }

  &.hero-xs {
    height: 100px;

    @media (min-width: $screen-xs) {
      height: 150px;
    }
    @media (min-width: $screen-sm) {
      height: 200px;
    }
    @media (min-width: $screen-md) {
      height: 250px;
    }
    @media (min-width: $screen-lg) {
      height: 300px;
    }
    @media (min-width: $screen-xl) {
      height: 350px;
    }
    @media (min-width: $screen-xxl) {
      height: 400px;
    }
  }

  &.hero-shaded {
    @extend %hero-gradient;
  }

  h1, h2, h3, h4, h5, h6, p {
    @extend %text-shadow;
  }
}