.hero-header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-size: cover;
  color: $white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-header .heading {
  flex: 0 1 auto;
}

.heading__avatar {
  margin-top: .5em;
  border: 2px solid $white;
  background: $white;
  border-radius: 50%;
}