.hero, 
.hero__content { position: relative; }
.hero__content { 
  margin: auto;
  max-width: 1560px;
  padding: 5vh 5vw;
  z-index: 2; 
}
.hero__gradient {
  mix-blend-mode: screen;
  overflow: hidden;
  position: absolute;
  top:0; 
  right:0;
  bottom:0;
  left:0;
  z-index:1;
}
.hero__bg1, 
.hero__bg2 {
  background-repeat: no-repeat;
  position: absolute; 
  z-index: 2;
}
.hero__bg1 { left: 0; bottom: 0; }
.hero__bg2 { right: 0; top: 0; }
.hero__title {
  font-weight: normal;
  line-height: 1.2;
  margin-top: 1em;
}
.hero__subtitle {
  color: #fff;
  line-height: 1.5;
  margin-top: 0;
}
@media (min-width: 768px) {
  .hero__title { font-size: 4vw; }
  .hero__subtitle { font-size: calc(1rem + 0.5vw); }
  h2 { font-size: calc(1rem + 1vw); }
  .hero__bg1, 
  .hero__bg2 {
    height: 70%;
    width:50%;
  }
}

@media (max-width: 767px) {
  .hero__title { font-size: 7vw; }
  .hero__subtitle { calc(1rem + 1vw); }
  h2 { font-size: calc(1rem + 2vw); }
  .hero__bg1, 
  .hero__bg2 {
    height: 45%;
    width:50%;
  }
}