/* Hero refinement: keep copy and portrait in one visual container. */
@media (min-width: 768px) {
  .hero-container {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  }

  .hero-copy {
    padding-left: 4rem;
  }

  .hero-image {
    justify-self: center;
    width: 100%;
    max-width: 720px;
  }
}

@media (min-width: 1280px) {
  .hero-copy {
    padding-left: 5rem;
  }
}