@media (max-width: 780px) {
  .hero { padding-bottom: 82px; }
  .hero-copy { padding-bottom: 54px; }
  .hero-photo { height: 440px; margin-bottom: 64px; }
  .hero-photo img { object-position: center; }
  .photo-note {
    background: var(--cream);
    bottom: -47px;
    font-size: 1.8rem;
    padding: 12px 15px 10px;
    right: 14px;
    transform: rotate(-5deg);
  }
  .orb { display: none; }
  .hero-side { bottom: 29px; }
}

@media (max-width: 400px) {
  .hero-photo { height: 370px; }
}