/* Keep the supplied portrait centred on the dog at every hero size. */
.hero-media > img.hero-real-dogs {
  object-position: center 61%;
}

/* On phones keep the message over the distant background, not the dog or treat. */
@media (max-width: 760px) {
  .hero-media .floating-note {
    top: 5%;
    right: 5%;
    bottom: auto;
    max-width: 150px;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .hero-media > img.hero-real-dogs {
    object-position: center 56%;
  }
}