.hero {
  grid-template-columns: 37% 63%;
  min-height: 610px;
  background-image: linear-gradient(90deg, #f9f5eb 0 27%, #f9f5ebcc 33%, transparent 42%), url('assets/hero-reflective-arrival.png');
  background-color: #24475f;
  background-size: cover, contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.hero-copy {
  background: linear-gradient(90deg, #faf7efed 0 70%, #faf7efb8 82%, transparent 100%);
  padding-right: clamp(24px, 5vw, 78px);
}

.hero-visual { display: none; }

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    display: block;
    background-image: linear-gradient(180deg, #faf7eff7 0 57%, #faf7ef33 76%, transparent 100%), url('assets/hero-reflective-arrival.png');
    background-size: auto, cover;
    background-position: center, 58% bottom;
  }
  .hero-copy { background: transparent; padding-bottom: 310px; }
}