@media (min-width: 701px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .55fr); }
  .hero-visual { width: min(100%, 460px); min-height: 540px; height: 540px; justify-self: end; align-self: end; background: #020c1d; }
  .hero-visual img { object-fit: contain; object-position: center; background: #020c1d; }
}

@media (max-width: 700px) {
  .hero-visual img { object-fit: contain; background: #020c1d; }
}