/* About page */

.about-intro { padding-block: var(--section-space); }
.about-intro__row { display: flex; align-items: center; gap: var(--spacing-3xl); }
.about-intro__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-lg); }
.about-intro__title { font-size: var(--font-size-5xl); line-height: var(--line-height-5xl); }
.about-intro__lead { font-size: var(--font-size-xl); line-height: var(--line-height-xl); }
.about-intro__body { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--color-text-secondary); }
.about-intro__buttons { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }

/* Image Shape */
.shape { margin: 0; overflow: hidden; }
.shape img { width: 100%; height: 100%; object-fit: cover; }
.shape--arch { border-radius: var(--radius-full) var(--radius-full) 0 0; }
.shape--rounded { border-radius: var(--radius-2xl); }
.shape--pill { border-radius: var(--radius-full); }
.about-intro__photo { flex: 0 0 440px; height: 560px; }

/* Prose */
.prose { max-width: var(--reading-max); padding-block: var(--spacing-xl); font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--color-text-secondary); }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: var(--spacing-lg); padding: var(--spacing-3xl) 0 var(--section-space); }
.photos .shape--rounded, .photos .shape--pill { height: 460px; }
.photos .shape--arch { height: 500px; }

/* ================= Tablet ================= */
@media (max-width: 1199px) {
  .about-intro__row { align-items: center; gap: var(--spacing-3xl); }
  .about-intro__title { font-size: var(--font-size-4xl); line-height: var(--line-height-4xl); }
  .about-intro__photo { flex-basis: 300px; height: 400px; }
  .photos .shape--rounded, .photos .shape--pill, .photos .shape--arch { height: 360px; }
}

/* ================= Mobile ================= */
@media (max-width: 767px) {
  .about-intro__row { flex-direction: column-reverse; align-items: stretch; gap: var(--spacing-3xl); }
  .about-intro__photo { flex: none; width: 100%; height: 400px; }
  .about-intro__lead { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
  .about-intro__body { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  .prose { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  .photos { grid-template-columns: 1fr; }
  .photos .shape--rounded, .photos .shape--pill, .photos .shape--arch { height: 320px; }
}