/* by osmy — Sobre mí / Por qué existe.
   Requiere tokens.css.
*/

body.os-site .os-about {
  background: var(--os-paper);
}

/* ---------- LAYOUT ---------- */

body.os-site .os-about__inner {
  display: grid;

  grid-template-columns:
    minmax(18rem, 0.85fr)
    minmax(0, 1.15fr);

  gap: clamp(
    var(--os-space-7),
    7vw,
    var(--os-space-10)
  );

  align-items: center;
}

/* ---------- MEDIA ---------- */

body.os-site .os-about__media {
  width: 100%;
  max-width: 30rem;

  margin: 0;

  overflow: hidden;

  border-radius: var(--os-radius-lg);

  background: var(--os-paper-2);
}

body.os-site .os-about__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 3 / 4;

  object-fit: cover;
  object-position: center;
}

/* ---------- CONTENT ---------- */

body.os-site .os-about__content {
  min-width: 0;
}

body.os-site .os-about__content h2 {
  max-width: 16ch;

  margin: 0 0 var(--os-space-6);
}

/* ---------- COPY ---------- */

body.os-site .os-about__copy {
  max-width: 56ch;
}

body.os-site .os-about__copy p {
  margin: 0;

  color: var(--os-color-text-secondary);

  font-size: clamp(
    1rem,
    0.95rem + 0.2vw,
    1.125rem
  );

  line-height: 1.65;
}

body.os-site .os-about__copy p + p {
  margin-top: var(--os-space-4);
}

/* ---------- SIGNATURE ---------- */

body.os-site .os-about__signature {
  margin: var(--os-space-5) 0 0;

  color: var(--os-wine);

  font-family: var(--os-font-display);
  font-size: var(--os-type-h4);
  font-style: italic;
  line-height: 1.2;
}

/* ---------- TABLET ---------- */

@media (max-width: 900px) {

  body.os-site .os-about__inner {
    grid-template-columns:
      minmax(16rem, 0.8fr)
      minmax(0, 1.2fr);

    gap: var(--os-space-7);
  }

}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

  body.os-site .os-about__inner {
    grid-template-columns: 1fr;

    gap: var(--os-space-7);
  }

  body.os-site .os-about__media {
    max-width: none;
  }

  body.os-site .os-about__content h2 {
    max-width: 18ch;

    margin-bottom: var(--os-space-5);
  }

  body.os-site .os-about__copy {
    max-width: 100%;
  }

}