#hero {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/img/hero-mobile.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  #hero {
    background-image: url("../../assets/img/hero.jpg");
  }
}

@media (min-width: 300px) {
  #slogan {
    font-family: 'Aguafina Script', cursive;
    font-size: 8vw;
    margin-top: 0px;
    padding-top: 272px;
    padding-left: 48px;
  }
}

@media (min-width: 576px) {
  #slogan {
    font-family: 'Aguafina Script', cursive;
    font-size: 40px;
    margin-top: 0px;
    padding-top: 272px;
    padding-left: 63px;
  }
}

@media (min-width: 768px) {
  #slogan {
    padding-top: 216px;
    padding-left: 144px;
    font-size: 62px;
  }
}