/* ==========================================================================
   Etappe 5 – Über mich (#about)
   Persönlicher als der Rest: das Foto sitzt wie ein aufgezogener Abzug in einem
   sandfarbenen Passepartout, der Text daneben läuft etwas größer als sonst.
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-xl);
  align-items: start;
}

.about__photo {
  grid-column: 1 / span 4;
  padding: clamp(0.5rem, 0.35rem + 0.4vw, 0.75rem);
  border-radius: var(--radius-media);
  background-color: var(--sand);
}

.about__photo img {
  width: 100%;
  height: auto;
  border-radius: 1px;
}

.about__caption {
  margin-top: var(--space-2xs);
  color: var(--fg-soft);
  font-size: var(--step--1);
}

.about__text {
  grid-column: 6 / span 6;
  max-width: 54ch;
}

.about__title {
  color: var(--heading);
  font-size: clamp(1.875rem, 1.5rem + 1.67vw, 3rem);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  line-height: 1.15;
}

.about__text p {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.55;
}

.about__close {
  max-width: 32ch;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
}

@media (max-width: 56rem) {
  .about {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-l);
  }

  .about__photo {
    grid-column: 1;
    max-width: 16rem;
  }

  .about__text {
    grid-column: 1;
  }
}