/* Keep portrait travel photos legible instead of cropping them across a wide banner. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: stretch;
    background: var(--navy);
  }

  .hero-image {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    background-position: center 25%;
    transform: none !important;
    will-change: auto;
  }

  .hero-shade { display: none; }

  .hero-content {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: auto;
    padding: 50px clamp(40px, 5vw, 88px);
    transform: none;
  }

  .hero h1 { font-size: clamp(58px, 5.2vw, 100px); }
  .hero-caption { left: 2.5%; }
}

.page-hero.portrait-hero {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: stretch;
  height: clamp(600px, 75svh, 760px);
  min-height: 0;
  background: var(--navy);
}

.page-hero.portrait-hero .page-hero-image {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: var(--portrait-focus);
  transform: none !important;
  will-change: auto;
}

.page-hero.portrait-hero .page-hero-overlay { display: none; }

.page-hero.portrait-hero .page-hero-copy,
.page-hero.right.portrait-hero .page-hero-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: auto;
  margin: 0;
  padding: 45px clamp(40px, 5vw, 88px);
}

.page-hero.portrait-hero h1 {
  font-size: clamp(58px, 5.2vw, 96px);
}

.page-hero.portrait-hero .hero-caption { left: 2.5%; }

@media (max-width: 899px) {
  .page-hero.portrait-hero {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .page-hero.portrait-hero .page-hero-image,
  .page-hero.right.portrait-hero .page-hero-image {
    grid-column: 1;
    grid-row: 1;
    height: min(68svh, 650px);
    min-height: 440px;
    background-position: var(--portrait-focus);
  }

  .page-hero.portrait-hero .page-hero-copy,
  .page-hero.right.portrait-hero .page-hero-copy {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 48px 7vw 64px;
  }

  .page-hero.portrait-hero .hero-caption { display: none; }
}

@media (max-width: 600px) {
  .page-hero.portrait-hero .page-hero-image,
  .page-hero.right.portrait-hero .page-hero-image {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--portrait-ratio);
    background-position: center top;
  }

  .page-hero.portrait-hero .page-hero-copy,
  .page-hero.right.portrait-hero .page-hero-copy {
    padding: 42px 25px 60px;
  }

  .page-hero.portrait-hero h1 { font-size: clamp(52px, 11vw, 70px); }
}