Write the CSS code for hiding a div with the class hero only on mobile phone and tablet

index.css

/* mobile device */

@media only screen and (max-width:320px) {
  .hero {
    width: 28%;
    display: none;
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
  }
}

/* tablet device */

@media only screen and (min-width: 768px)  {
  .hero {
    width: 28%;
    display: none;
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
  }
}