#hero .text{
  padding:80px;
}

#hero .text .button{
  margin:40px 30px 0 0;
  font-size:18px;
}
#hero .text .button:nth-child(odd){
  background:white;
  color:#C42E28;
}

#hero .bg{
  align-self: stretch;
  background-image:var(--bg-image-desktop);
  background-position:center center;
}


@media (min-width:1801px){
  #hero .bg{
    background-image:var(--bg-image-desktop-large);
  }
}

@media (min-width:1231px){
  #hero .text{
    padding-left:calc(50vw - 570px);
  }
}
@media (max-width:1024px){
  #hero h1{
    font-size:32px !important;
  }
  #hero p{
    font-size:18px !important;
  }
  #hero .text{
    padding:60px;
  }
  #hero .text .button{
    margin:10px 10px 0 0;
  }
}

@media (min-width:769px){
  #hero .flex > div{
    width:50%;
  }
}
@media (max-width:768px){
  #hero{
    margin-bottom:60px;
  }
  #hero .text{
    padding:40px 40px 60px 40px;
  }
  #hero .flex{
    flex-direction:column-reverse;
  }
  #hero .bg{
    width:100vw;
    height:75vw;
}