/* ==========================================================================
   NOSOTROS (#nosotros) — statement + text on the left,
   "Personas · Datos · Procesos" list on the right.
   ========================================================================== */

.about__main {
  grid-column: 1 / span 6;
}

.about__main > .label {
  margin-bottom: var(--space-5);
}

.about__text {
  max-width: 56rem;
  margin-top: var(--space-6);
  color: var(--muted);
}

.about__pillars {
  grid-column: 8 / span 5;
  align-self: end;
  border-top: 1px solid var(--color1);
}

.about__pillar {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.about__pillar-num {
  padding-top: .6rem;
  color: var(--color-text-muted);
}

.about__pillar-text {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .about__main {
    grid-column: 1 / span 11;
  }

  .about__pillars {
    grid-column: 1 / -1;
    margin-top: var(--space-8);
  }
}

@media (max-width: 767px) {
  .about__main,
  .about__pillars {
    grid-column: 1 / -1;
  }

  .about__main > .label {
    margin-bottom: var(--space-4);
  }

  .about__text {
    margin-top: var(--space-5);
  }

  .about__pillars {
    margin-top: var(--space-7);
  }

  .about__pillar {
    grid-template-columns: 4.8rem 1fr;
  }
}