.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--shell);
}

.about-hero__media {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  background: var(--stone);
}
.about-hero__media .slot { position: absolute; inset: 0; }

.about-hero__text {
  padding: 104px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 54px);
  color: var(--ink);
  margin: 0 0 34px;
}

.about-hero__quote {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 26px;
  text-wrap: pretty;
}

.about-hero__body {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
}

.about-card { background: var(--cream); padding: 54px 48px; }

.about-card__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 18px;
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero__media { min-height: 420px; }
  .about-hero__text { padding: 64px var(--gutter); }
  .about-grid { grid-template-columns: 1fr; }
  .about-card { padding: 40px 32px; }
}