.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px;
  height:330px;
  background-color:#0E4174;
  background-image:var(--bg-image-desktop);
  background-position:center left;
  background-repeat:no-repeat;
  background-size:cover;
  text-align: center;
}
.hero h1 {
    font-size: 90px;
    font-weight: 100;
    color: #fff;
    line-height: 1;
    color: #fff;
    letter-spacing: -.025em;
    text-align: center;
    margin: 0;
    font-family: 'Fira Sans', sans-serif;
}
@media (max-width:768px){
  .hero h1{
    font-size:60px;
  }
@media (max-width:640px){ 
  .hero{
    background-image:var(--bg-image-mobile);
  }
}