@media screen and (max-width: 500px) {
  #hero {
    visibility: hidden;
    height: 0;
  }
}

@media screen and (min-width: 501px) {
  #hero {
    visibility: visible;
  }
}

@media screen and (max-width: 500px) {
  #heroalt {
    visibility: visible;
  }
}

@media screen and (min-width: 501px) {
  #heroalt {
    visibility: hidden;
    height: 0;
  }
}