/* Mobile hero: anchor the ensemble left and reserve a separate row for the quote. */
@media (min-width: 761px) {
  .hero-art .knight {
    left: -28%;
  }

  .hero-art .quote {
    top: 110px;
    right: 0;
    bottom: auto;
  }
}

@media (max-width: 760px) {
  .hero-art {
    height: 470px;
    margin-top: 8px;
  }

  .hero-art .knight {
    height: 340px;
    left: 6%;
    right: auto;
    bottom: 96px;
  }

  .hero-art .quote {
    right: 0;
    bottom: 12px;
    max-width: 92%;
    padding: 12px 16px;
    transform: rotate(-1deg);
  }

  .hero-art .art-caption {
    top: 38px;
    left: 0;
  }
}

@media (max-width: 360px) {
  .hero-art {
    height: 430px;
  }

  .hero-art .knight {
    height: 305px;
    left: 2%;
    right: auto;
    bottom: 94px;
  }

  .hero-art .quote {
    right: 0;
    bottom: 10px;
    max-width: 96%;
  }
}