/* ==========================================================================
   pages/about.css — About me   (Figma: "About me" 1440 and "About me — 390")
   ========================================================================== */

.about-title {
  padding-top: clamp(3.625rem, 2.7431rem + 3.6190vw, 6rem);    /* 58 → 96 */
  padding-bottom: clamp(2.375rem, 1.7714rem + 2.4762vw, 4rem); /* 38 → 64 */
}

.about-title h1 {
  font-size: var(--type-display);                              /* 40 → 64 */
}

/* ---- Intro: slideshow + text -------------------------------------------- */
.about-intro {
  display: grid;
  gap: clamp(2rem, 1.2571rem + 3.0476vw, 4rem);                /* 32 → 64 */
  align-items: center;
}

.about-intro .slideshow {
  max-width: 37rem;                                            /* 592 */
}

@media (min-width: 64rem) { /* bp: desktop (≥ 1024px) — side by side, 592 : 656 */
  .about-intro {
    grid-template-columns: minmax(0, 592fr) minmax(0, 656fr);
  }
}

.about-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);                                        /* 20 */
}

.about-intro__heading {
  font-size: clamp(2rem, 1.6286rem + 1.5238vw, 3rem);          /* 32 → 48 */
  font-weight: 500;
}

.about-text {
  font-size: 1.125rem;                                         /* 18 */
  line-height: 1.6;
  color: var(--color-text-body);
}

/* ---- Outside work ---------------------------------------------------------
   Label + 656px text like the shared .split, without the divider. */
.about-outside {
  padding-top: clamp(4.5rem, 3.3857rem + 4.5714vw, 7.5rem);    /* 72 → 120 */
}

.about-outside .split__inner {
  padding-bottom: 0;
  border-bottom: 0;
}

.about-outside__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                                        /* 24 */
}