/* APM — Início: grelhas próprias da página.

   As molduras vivem em blocks.css, como estilos de bloco: as regras que
   aqui estavam apontavam a .hero-fig, .about-fig e .why-fig, classes da
   maqueta que a versão em blocos não produz, e por isso não faziam nada.

   O rabisco do título também vive em blocks.css: é uma máscara sobre o
   texto destacado, e não um SVG na marcação. */

/* Sobre a Associação e Porquê ser associado: texto e figura lado a lado.
   Na maqueta a figura do Porquê ser associado fica à esquerda, o que se
   resolve na ordem das colunas e não aqui. */
.about-cols{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2rem);align-items:center;
}
/* No Porquê ser associado e na adesão as duas colunas têm alturas muito
   diferentes e alinham pelo topo, não pelo centro. */
.about-cols.cols-top{align-items:start}
@media (min-width:48em){
  .about-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Cartões de evento e de notícia: um, dois e três por linha. */
.ev-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media (min-width:40em){.ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.ev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* As perguntas frequentes correm num contentor mais estreito do que o
   resto da página, como na maqueta. */
.faq-wrap{max-width:60rem;margin-left:auto;margin-right:auto}