.hero {
  position: relative;
	background-image: url("../../img/hero-background.jpg");
	padding: 50px 0;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero:after {
    content: '';
    width: 100%;
    height: 70%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0.5) 100%);
  }

.hero-head {
  width: 90%;
	max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}

.hero-subhead {
	background-color: var(--color-gray-20);
	padding: 50px 0;
}

.hero-subhead p {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    font-size: var(--font-body-regular);
    line-height: 1.4;
  }

@media screen and (min-width: 768px) {
	.hero {
		padding: 112px 0;
	}

	.hero-subhead {
    padding: 100px 0;
	}

    .hero-subhead p {
      font-size: var(--font-body-large);
    }
}