/* =========================================================================
   site.css — site publico (ingles).
   Referencia: primeira pagina de jornal impresso bem diagramado.
   ========================================================================= */

.envoltorio {
  width: 100%;
  max-width: var(--larg-max);
  margin-inline: auto;
  padding-inline: var(--goteira);
}

/* =====================================================================
   1. Cabecalho fixo
   ===================================================================== */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 246, 246, 0.93);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--fio);
}

.cabecalho::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--tinta);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 62px;
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.cabecalho__nome {
  font-family: var(--f-titulo);
  font-size: 1.22rem;
  line-height: 1;
  font-variation-settings: "opsz" 48;
  white-space: nowrap;
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navegacao__link {
  display: block;
  padding: 0.44em 0.9em;
  font-size: 0.93rem;
  text-decoration: none;
  color: var(--tinta-media);
  transition: color var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva);
}

.navegacao__link:hover {
  color: var(--tinta);
  background: var(--terra-veu);
}

/* a aba ativa e a pilula terrosa que ela ja usava */
.navegacao__link[aria-current="page"] {
  background: var(--terra);
  color: #fff;
}

.cabecalho__botao-menu {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--fio-forte);
  padding: 0.42em 0.8em;
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =====================================================================
   2. Capa da home
   ===================================================================== */

.capa {
  position: relative;
  padding-block: clamp(40px, 6vw, 76px) var(--respiro);
  overflow: clip;
}

/* colagens em preto e branco, como no portfolio dela, com parcimonia */
.colagem {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* O leitor de jornal fecha a capa embaixo, a direita: equilibra o retrato,
   que fica embaixo a esquerda, e fica fora da coluna de texto. */
.colagem--leitor {
  bottom: clamp(12px, 3vw, 44px);
  right: calc(var(--goteira) * -0.7);
  width: clamp(140px, 18vw, 244px);
}

/* As maos erguidas encerram a home, no pe da pagina. */
.colagem--maos {
  bottom: -10px;
  right: calc(var(--goteira) * -1.2);
  width: clamp(150px, 22vw, 300px);
  opacity: 0.88;
}

.capa__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* linha de data: o fio fino com os rotulos, no alto da pagina */
.linha-data {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  padding-bottom: 0.7rem;
  margin-bottom: clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--fio-forte);
}

.linha-data__ponto {
  color: var(--terra);
}

.capa__nome {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: clamp(3.1rem, 9.4vw, 6.6rem);
  line-height: 0.88;
  letter-spacing: -0.004em;
  margin-bottom: 0.26em;
}

.capa__lema {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: var(--tinta-media);
  letter-spacing: 0.055em;
  padding-left: 0.18em;
}

.capa__retrato {
  position: relative;
  margin-top: clamp(26px, 4vw, 42px);
  max-width: 390px;
}

.capa__foto {
  width: 100%;
  border: 1px solid var(--fio-tinta);
}

/* os microfones encostando na foto, como na colagem original */
.capa__microfones {
  position: absolute;
  left: -14%;
  bottom: -8%;
  width: 44%;
  pointer-events: none;
}

.capa__texto {
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
  padding-top: clamp(6px, 1.6vw, 22px);
  max-width: 540px;
}

.capa__paragrafo {
  font-size: clamp(1.02rem, 1.55vw, 1.14rem);
  line-height: 1.68;
}

.capa__paragrafo strong {
  font-weight: 700;
}

/* =====================================================================
   3. Faixa de formatos
   ===================================================================== */

.faixa-formatos {
  border-block: 1px solid var(--fio-forte);
  background: var(--terra-veu);
}

.faixa-formatos__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2.1rem;
  padding-block: 0.95rem;
}

.faixa-formatos__item {
  font-family: var(--f-manchete);
  font-size: 0.98rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =====================================================================
   4. Indice das outras secoes (home)
   ===================================================================== */

.indice {
  position: relative;
  padding-block: var(--respiro);
  overflow: clip;
}

.indice__grade {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--fio-forte);
  border-left: 1px solid var(--fio-forte);
}

.indice__item {
  display: block;
  padding: clamp(22px, 3vw, 34px);
  text-decoration: none;
  border-right: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
  transition: background-color var(--t-medio) var(--curva);
}

.indice__item:hover {
  background: var(--terra-veu);
}

.indice__numero {
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--terra);
  display: block;
  margin-bottom: 0.5rem;
}

.indice__titulo {
  font-family: var(--f-manchete);
  text-transform: uppercase;
  font-size: 1.16rem;
  line-height: 1.12;
  margin-bottom: 0.45rem;
}

.indice__resumo {
  font-size: 0.93rem;
  color: var(--tinta-media);
  line-height: 1.5;
}

.indice__seta {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terra-funda);
  transition: transform var(--t-medio) var(--curva);
}

.indice__item:hover .indice__seta {
  transform: translateX(5px);
}

/* =====================================================================
   5. Topo das paginas internas
   ===================================================================== */

.topo-pagina {
  padding-block: clamp(34px, 5vw, 62px) clamp(26px, 3.4vw, 40px);
}

.topo-pagina__titulo {
  max-width: 19ch;
  margin-bottom: clamp(16px, 2.4vw, 24px);
}

.topo-pagina__intro {
  max-width: 62ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.topo-pagina__lista {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(18px, 2.4vw, 26px);
  max-width: 68ch;
}

/* nota com o logo do veiculo ao lado */
.nota {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(22px, 3vw, 32px);
  padding: 1rem 1.2rem;
  border: 1px solid var(--fio);
  background: var(--terra-veu);
  max-width: 78ch;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--tinta-media);
}

.nota img {
  width: 76px;
}

/* =====================================================================
   6. Filtro de categorias
   ===================================================================== */

.filtro {
  position: sticky;
  top: 66px;
  z-index: 60;
  background: rgba(246, 246, 246, 0.95);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--fio-forte);
}

.filtro__faixa {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.6rem;
}

.filtro__faixa::-webkit-scrollbar {
  display: none;
}

.filtro__botao {
  flex: none;
  background: none;
  border: 1px solid transparent;
  padding: 0.42em 0.95em;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-media);
  transition: color var(--t-rapido) var(--curva),
    background-color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva);
}

.filtro__botao:hover {
  color: var(--tinta);
  border-color: var(--fio-forte);
}

.filtro__botao[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}

.filtro__conta {
  opacity: 0.6;
  margin-left: 0.45em;
}

/* =====================================================================
   7. Secoes e grade de materias
   ===================================================================== */

.materias {
  padding-block: clamp(30px, 4vw, 52px) var(--respiro);
}

.secao-materias + .secao-materias,
.secao + .secao {
  margin-top: clamp(40px, 5.4vw, 72px);
}

.secao-materias__cabeca,
.secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(14px, 2vw, 20px);
}

/* Precisa poder encolher e quebrar: os nomes de categoria sao longos
   ("Political & International Affairs reporting") e, travados em flex:none,
   esticam a linha para fora da tela no celular. */
.secao-materias__titulo,
.secao__titulo {
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.3vw, 2.5rem);
  line-height: 1.04;
  flex: 0 1 auto;
  min-width: 0;
}

/* o fio que corre ate o fim da linha, ao lado do titulo */
.secao-materias__fio,
.secao__fio {
  flex: 1 1 30px;
  min-width: 30px;
  height: 1px;
  background: var(--fio-forte);
}

.secao-materias__conta,
.secao__conta {
  flex: none;
}

/* A grade desenha uma treliça de fios de 1px: cada card traz o fio de cima
   e o da esquerda, e a propria grade fecha a direita e embaixo. */
.grade-materias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  border-right: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
}

.cartao {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fio-forte);
  border-left: 1px solid var(--fio-forte);
  padding: clamp(16px, 2vw, 22px);
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color var(--t-medio) var(--curva);
}

/* so o card com link responde ao mouse; sem link, nao ha clique */
a.cartao:hover {
  background: var(--papel-alto);
}

.cartao__topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

/* selo do veiculo: tipografico, igual para todos os veiculos */
.selo {
  flex: none;
  border: 1px solid var(--fio-tinta);
  padding: 0.18em 0.5em 0.22em;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.25;
}

.cartao__data {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.cartao__titulo {
  font-family: var(--f-manchete);
  text-transform: uppercase;
  font-size: clamp(1.04rem, 1.55vw, 1.2rem);
  line-height: 1.13;
  margin-bottom: 0.9rem;
}

a.cartao:hover .cartao__titulo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cartao__figura {
  margin: 0 0 0.9rem;
  overflow: hidden;
  border: 1px solid var(--fio);
  background: var(--papel-fundo);
  aspect-ratio: 16 / 10;
}

.cartao__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento) var(--curva);
}

a.cartao:hover .cartao__figura img {
  transform: scale(1.035);
}

.cartao__resumo {
  font-size: 0.925rem;
  line-height: 1.56;
  color: var(--tinta-media);
  margin-bottom: 1rem;
}

.cartao__rodape {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--fio);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--terra-funda);
  display: flex;
  align-items: center;
  gap: 0.45em;
}

.cartao__rodape span {
  transition: transform var(--t-medio) var(--curva);
}

a.cartao:hover .cartao__rodape span {
  transform: translateX(4px);
}

/* =====================================================================
   8. Rodape
   ===================================================================== */

.rodape {
  border-top: 3px double var(--fio-forte);
  padding-block: clamp(30px, 4vw, 48px);
  margin-top: auto;
}

.rodape__grade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.rodape__nome {
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-size: 1.4rem;
  line-height: 1;
}

.rodape__navegacao {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.rodape__navegacao a {
  font-size: 0.86rem;
  color: var(--tinta-media);
  text-decoration: none;
}

.rodape__navegacao a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================================
   9. Telas estreitas
   ===================================================================== */

@media (max-width: 1000px) {
  .capa__grade {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 40px);
  }

  .capa__retrato {
    max-width: 330px;
  }

  /* Em coluna unica o texto ocupa a largura toda, entao a colagem do leitor
     passaria por cima dele. Fora dessa largura ela simplesmente sai. */
  .colagem--leitor {
    display: none;
  }

  .colagem--maos {
    width: clamp(130px, 24vw, 200px);
    opacity: 0.55;
  }
}

/* A navegacao completa (quatro secoes com nomes longos) deixa de caber bem
   antes da largura de celular. Abaixo disto ela vira menu, senao sobra uma
   faixa de larguras de tablet em que os links simplesmente somem. */
@media (max-width: 980px) {
  .cabecalho__botao-menu {
    display: inline-flex;
  }

  /* o menu: painel de papel que desce sob o cabecalho */
  .navegacao {
    position: fixed;
    inset: 66px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--fio-forte);
    padding: 0.4rem var(--goteira) 1rem;
    box-shadow: 0 18px 34px -24px rgba(20, 18, 16, 0.5);
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform var(--t-medio) var(--curva),
      visibility var(--t-medio) var(--curva);
  }

  .navegacao[data-aberto="sim"] {
    transform: none;
    visibility: visible;
  }

  .navegacao__link {
    padding: 0.82em 0.7em;
    font-size: 1.04rem;
    border-bottom: 1px solid var(--fio);
  }

  .navegacao__link:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .cabecalho__nome {
    display: none;
  }

  .filtro {
    top: 62px;
  }

  /* a treliça vira coluna unica: so os fios de cima e de baixo */
  .grade-materias {
    grid-template-columns: 1fr;
    border-right: 0;
  }

  .cartao {
    border-left: 0;
    padding-inline: 0;
  }

  .capa__retrato {
    max-width: 100%;
  }

  /* no celular a foto ocupa a largura toda; os microfones precisam encolher
     para nao comer o rosto */
  .capa__microfones {
    left: -6%;
    width: 34%;
  }

  .faixa-formatos__lista {
    gap: 0.4rem 1.2rem;
  }

  .faixa-formatos__item {
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .colagem--maos {
    opacity: 0.5;
  }
}

/* =====================================================================
   10. Experience & recognitions
   ===================================================================== */

.pagina-secoes {
  padding-block: clamp(8px, 1.6vw, 20px) var(--respiro);
}

/* cada secao abre com o fio duplo, como inicio de caderno de jornal */
.pagina-secoes .secao {
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 3px double var(--fio-forte);
}

/* ---- premios: treliça de fios, como a grade de materias ---------------- */

.grade-premios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border-right: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
}

.premio {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--fio-forte);
  border-left: 1px solid var(--fio-forte);
}

.premio__topo {
  position: relative;
}

.premio__figura {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--fio);
  background: var(--papel-fundo);
}

.premio__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a roseta pousa no canto da foto, como um selo colado, levemente torto */
.premio__medalha {
  position: absolute;
  top: -20px;
  left: -16px;
  width: clamp(56px, 6vw, 72px);
  transform: rotate(-7deg);
  filter: drop-shadow(0 7px 8px rgba(20, 18, 16, 0.3));
  pointer-events: none;
}

.premio__titulo {
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.04;
}

.premio__texto {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tinta-media);
}

/* sem foto, a roseta vai para o fluxo, antes do titulo */
.premio--sem-figura .premio__medalha {
  position: static;
  transform: none;
  margin-bottom: -0.2rem;
}

/* ---- registros: experiencias, pesquisa e campo ------------------------- */

/* Mosaico, como o dos premios: foi o layout que ela escolheu.
   Antes eram linhas empilhadas, que destoavam do resto do site. */
.registros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border-top: 1px solid var(--fio-forte);
  border-right: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
}

.registro {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  padding: clamp(18px, 2.4vw, 30px);
  border-left: 1px solid var(--fio-forte);
}

/* o item sem foto nao deixa buraco: o texto ocupa o quadro todo */
.registro--sem-figura .registro__texto {
  margin-top: 0;
}

.registro__icone {
  order: -2;
  width: 44px;
  height: 44px;
  color: var(--tinta);
  flex: none;
}

.registro__icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

.registro__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  margin-bottom: 0.5rem;
}

.registro__titulo {
  font-family: var(--f-manchete);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: 0.012em;
  margin-bottom: 0.75rem;
}

.registro__descricao {
  max-width: 64ch;
  font-size: clamp(1rem, 1.4vw, 1.06rem);
  line-height: 1.68;
}

.registro__descricao strong {
  font-weight: 700;
}

.registro__figura {
  order: -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--fio);
  background: #fff;
}

.registro__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   11. Multimedia journalism
   ===================================================================== */

.mm-bloco {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "cabeca cabeca"
    "figura texto";
  gap: clamp(18px, 2.6vw, 30px) clamp(24px, 4.4vw, 68px);
  align-items: center;
  padding-block: clamp(26px, 4vw, 52px);
  border-top: 3px double var(--fio-forte);
}

/* de dois em dois, a imagem troca de lado: da ritmo a pagina */
.mm-bloco:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "cabeca cabeca"
    "texto figura";
}

.mm-bloco__cabeca {
  grid-area: cabeca;
  display: flex;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.mm-bloco__numero {
  flex: none;
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.6rem, 3.3vw, 2.5rem);
  line-height: 1.04;
  color: var(--terra);
}

.mm-bloco__titulo {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-titulo);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.3vw, 2.5rem);
  line-height: 1.04;
}

.mm-bloco__figura {
  grid-area: figura;
  min-width: 0;
}

.mm-bloco__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--fio-tinta);
}

.mm-bloco__legenda {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--fio);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.mm-bloco__texto {
  grid-area: texto;
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.7;
}

.mm-bloco__texto strong {
  font-weight: 700;
}

/* bloco com varias imagens (os reels): texto em cima, galeria embaixo */
.mm-bloco--galeria,
.mm-bloco--galeria:nth-child(even) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "cabeca"
    "texto"
    "figura";
  align-items: start;
}

.mm-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 26px);
  max-width: 880px;
}

.mm-bloco--galeria .mm-galeria img {
  aspect-ratio: 9 / 16;
}

@media (max-width: 760px) {
  .grade-premios {
    grid-template-columns: 1fr;
    border-right: 0;
  }

  .premio {
    border-left: 0;
    padding-inline: 0;
  }

  .premio__figura {
    aspect-ratio: 16 / 10;
  }

  .registro,
  .registro--sem-figura {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
  }

  .registro__icone {
    width: 44px;
    height: 44px;
  }

  .registro__figura {
    grid-column: 2;
    max-width: 240px;
  }

  .mm-bloco,
  .mm-bloco:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cabeca"
      "figura"
      "texto";
    align-items: start;
  }

  .mm-bloco--galeria,
  .mm-bloco--galeria:nth-child(even) {
    grid-template-areas:
      "cabeca"
      "texto"
      "figura";
  }

  /* reels em faixa que desliza: tres retratos lado a lado ficariam
     minusculos, e um embaixo do outro, enormes */
  .mm-galeria {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mm-galeria::-webkit-scrollbar {
    display: none;
  }

  .mm-galeria img {
    flex: none;
    width: 62%;
    scroll-snap-align: start;
  }
}