.hero {
  display: flex;
  position: relative;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 250px;

  h1 {
    flex: 1 1 auto;
    background-color: rgba($blue, 0.75);
    padding: $gutter;
    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: 900px) {
  .hero {
    h1 {
      padding: $gutter calc((100% - 850px) / 2);
      text-align: inherit;
    }
  }
}