/* Mobile portrait: natural proportions, no overlap with the introduction. */
@media (max-width: 800px) {
  .hero { min-height: 0; }
  .hero .hero-grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .hero .hero-copy { align-self: start; }
  .hero .portrait-wrap {
    width: min(100%, 480px);
    height: auto;
    /* The existing 1312 x 1199 artwork has 39 transparent bottom rows. */
    aspect-ratio: 1312 / 1160;
    margin: 28px auto 0;
    align-self: end;
  }
  .hero .portrait {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    /* Centre the visible silhouette within the transparent artwork. */
    transform: translateX(-3.1%);
  }
  .hero .portrait-sun {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    right: -20%;
    bottom: -30%;
  }
}