.hero {
  display: flex;
  position: relative;
  align-content: center;
  align-items: center;
  justify-content: center;
  margin: 0 0 ($gutter * 2);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 0;
  height: 250px;

  h1 {
    flex: 1 1 auto;
    background-color: rgba($blue, 0.75);
    padding: $gutter;
    width: auto;
    text-align: center;
    color: $copy-light;
  }

  .blue {
    background-color: rgba($blue, 0.75);
  }

  .dark-blue {
    background-color: rgba($dark-blue, 0.75);
  }

  .yellow {
    background-color: rgba($yellow, 0.75);
    color: $copy-dark;
  }

  .orange {
    background-color: rgba($orange, 0.75);
  }

  .red {
    background-color: rgba($red, 0.75);
  }
}

@media screen and (min-width: 426px) {
  .hero {
    h1 {
      flex: 0 0 auto;
      width: 425px;
    }
  }
}

@media screen and (min-width: 768px) {
  .hero {
    h1 {
      width: calc(100% * 0.809);
      max-width: 860px;
      text-align: inherit;
    }
  }
}