/* About only: a single bordered grid using the existing SOO RAR tokens. */
.about-page .about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  background: var(--surface);
}
.about-page .about-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-xl);
}
.about-page .about-card + .about-card { border-left: 1px solid var(--border); }
.about-page .about-card-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.about-page .about-card-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  fill: none;
  stroke: var(--brown);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-page .about-card h2 {
  font-size: var(--type-title-size);
  line-height: var(--type-title-lineHeight);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-letterSpacing);
}
.about-page .about-card > p {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lineHeight);
}
.about-page .about-card > .sr-link {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 1279px) {
  .about-page .about-card { padding: var(--space-lg); }
}
@media (max-width: 767px) {
  .about-page .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-page .about-card + .about-card {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 767px) {
  .about-page .about-card > p { font-size: 16px; margin-top: var(--space-md); }
}