.hero-image {
  float: left;
  display: block;
  width: 320px !important;
  max-width: 320px !important;
  height: auto !important;
  margin: 0 2.5rem 1.25rem 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .hero-image {
    width: 210px !important;
    max-width: 210px !important;
    margin-right: 2rem;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .hero-image {
    float: none;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto 1.5rem auto;
  }

  .hero {
    text-align: left;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

  .hero-image {
    width: 135px !important;
    max-width: 135px !important;
  }

}