.hero-img {
  width: 100%;       /* No celular: ocupa tudo */
  max-width: 700px;  /* No computador: não passa de 700px */
  height: auto;      /* Mantém a proporção original */
  display: block;
  margin: 0 auto;    /* Centraliza se a tela for maior que 700px */
}