.overview__grid {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* Image sits left, copy right. Done with `order` rather than by reordering
   the markup so the heading and body text still come first in the DOM for
   screen readers, and so the mobile stack below (image above text) needs no
   separate handling. */
.overview__art {
  order: -1;
}

.overview__copy h2 {
  margin-top: 16px;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.overview__copy p {
  margin-top: 20px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-ink-soft);
}

@media (max-width: 960px) {
  .overview__grid {
    grid-template-columns: 1fr;
  }

  .overview__art {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
    order: -1;
  }
}