styles.css

.header {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.hero {
  display: table-cell;
  vertical-align: middle;
  background-image: url('assets/hero.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero__text {
  margin: auto;
  text-align: center;
  width: 40vw;
  padding: 5vw;
  font-family: sans-serif;
  color: white;
  border: 2px solid white;
}

.hero__text__heading {
  font-size: 7vw;
}

.hero__text__body {
  padding-top: 1vw;
  font-size: 2vw;
}

@media only screen and (max-width: 700px) {
  .hero__text {
    width: 50vw;
  }

  .hero__text__heading {
    font-size: 11vw;
  }

  .hero__text__body {
    font-size: 4vw;
  }
}