/* ==========================================================================
   Sobre: componentes próprios da página.
   Usa os tokens e as classes de site.css; aqui só o que é desta página.
   ========================================================================== */

/* missão */
.h2.sobre-missao__t{max-width:20em}
.sobre-missao__txt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:36px}
.sobre-missao__txt .lead{max-width:none}

/* valores: três em cima, dois mais largos embaixo */
.sobre-valores{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:48px}
.sobre-valor{grid-column:span 2;display:flex;flex-direction:column;gap:10px;background:var(--papel);border-radius:18px;padding:26px 26px 28px}
.sobre-valor:nth-child(n+4){grid-column:span 3}
.sobre-valor__n{display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);color:var(--cinza-texto)}
.sobre-valor__n i{width:9px;height:9px;background:var(--laranja);transform:rotate(45deg);border-radius:2px}
.sobre-valor h3{font:700 23px/1.15 var(--display);letter-spacing:-.015em;margin:14px 0 0}
.sobre-valor p{margin:0;font-size:16.5px;color:#3a3d45}

/* como trabalhamos */
.sobre-como__link{margin:30px 0 0}


@media (max-width:1100px){
  .sobre-valores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sobre-valor,.sobre-valor:nth-child(n+4){grid-column:auto}
  .sobre-valor:last-child{grid-column:1 / -1}
}
@media (max-width:860px){
  .sobre-missao__txt,.sobre-valores{grid-template-columns:1fr}
  .sobre-valor:last-child{grid-column:auto}
}