.intro-day {
  grid-column: 1;
  grid-row: 1;
}

.intro-day .eyebrow {
  padding-top: 1rem;
}

.intro-day figure,
.intro-night {
  margin: 0;
  overflow: hidden;
  background: #091d1e;
}

.intro-day figure {
  margin-top: 2.25rem;
}

.intro-day img,
.intro-night img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 707 / 395;
  object-fit: cover;
}

.intro > h2 {
  grid-column: 2;
  grid-row: 1;
}

.intro-night {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.intro > p[data-i18n="introText"] {
  grid-column: 2;
  grid-row: 2;
}

@media (max-width: 900px) {
  .intro-day,
  .intro > h2,
  .intro-night,
  .intro > p[data-i18n="introText"] {
    grid-column: 1;
    grid-row: auto;
  }

  .intro-day figure {
    margin-top: 1.5rem;
  }
}

/* Keep the day/night pair together and anchor the copy at their shared centre. */
.intro.section{
  grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:1rem;
  align-items:stretch;
}
.intro-day figure{margin-top:1rem}
.intro > h2{align-self:end;max-width:27ch;margin:0 0 .25rem}
.intro > p[data-i18n="introText"]{align-self:start;max-width:58ch;margin:.25rem 0 0}
@media(max-width:900px){
  .intro.section{grid-template-columns:minmax(0,1fr);row-gap:clamp(.85rem,2.5vw,1.25rem)}
  .intro-day figure{margin-top:.85rem}
  .intro > h2{max-width:28ch;justify-self:start;align-self:auto;text-align:left;margin:0}
  .intro > p[data-i18n="introText"]{align-self:auto;margin:.4rem 0 0}
}