.about-history {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.about-history__intro {
  display: grid;
  gap: var(--space-xl);
}

.about-history__heading {
  display: grid;
  gap: var(--space-md);
}

.about-history__eyebrow {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.about-history__lead {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xl);
  min-block-size: 119px;
}

.about-history__lead-text {
  flex: 0 1 var(--size-about-lead);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-history__story {
  display: grid;
  grid-template-columns: minmax(0, 704fr) minmax(0, 734fr);
  border: 1px solid var(--color-border-strong);
}

.about-history__story--image-only,
.about-history__story--timeline-only { grid-template-columns: minmax(0, 1fr); }

.about-history__visual {
  position: relative;
  min-block-size: 24rem;
}

.about-history__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-history__timeline {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-history__timeline::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  background: var(--color-border-strong);
  content: '';
  pointer-events: none;
}

.about-history__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-history__row--left .about-history__card { grid-column: 1; }
.about-history__row--right .about-history__card { grid-column: 2; }

@media (width > 64rem) {
  .about-history__row--last { min-block-size: 17.25rem; }
}

.about-history__card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-xl);
  min-block-size: 0;
  padding: var(--space-lg);
}

.about-history__number {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-large);
  font-weight: 274;
  line-height: var(--lh-description);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.about-history__card-title {
  margin: 0;
  font-size: clamp(var(--fs-button), 2.0833vw, var(--fs-direction-title));
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-history__card-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-history__closing {
  display: flex;
  justify-content: flex-end;
}

.about-history__closing-text {
  max-inline-size: 566px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

@media (width <= 64rem) {
  .about-history__story { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .about-history__story--image-only,
  .about-history__story--timeline-only { grid-template-columns: minmax(0, 1fr); }
}

@media (width <= 48rem) {
  .about-history { gap: 0; }
  .about-history__intro { gap: var(--space-lg); margin-block-end: var(--space-lg); }
  .about-history__lead { flex-direction: column; gap: var(--space-md); }
  .about-history__lead-text { flex: none; }
  .about-history__story { grid-template-columns: minmax(0, 1fr); border-block-end: 0; }
  .about-history__visual { min-block-size: 0; aspect-ratio: 4 / 3; border-block-end: 1px solid var(--color-border-strong); }
  .about-history__timeline::before { content: none; }
  .about-history__row { grid-template-columns: minmax(0, 1fr); border-block-end: 1px solid var(--color-border-strong); }
  .about-history__row--left .about-history__card,
  .about-history__row--right .about-history__card { grid-column: 1; }
  .about-history__card { gap: var(--space-md); padding: var(--space-lg) var(--container-gutter); }
  .about-history__closing { justify-content: flex-start; padding-block: var(--space-lg); border: 1px solid var(--color-border-strong); }
  .about-history--with-story .about-history__closing { border-block-start: 0; }
  .about-history__closing-text { max-inline-size: 100%; }
}