#mw-eleicoes .eleAnuncio {
  display: flex;
  justify-content: center;
}

/* 'primeiro' e 'grande' ocupam a mw-area inteira (970px no desktop); no
   mobile a mw-area ja vira coluna unica, entao o span nao atrapalha o
   tamanho fixo definido em .eleAnuncioBox--300x100/300x250 */
#mw-eleicoes .eleAnuncio--primeiro,
#mw-eleicoes .eleAnuncio--grande {
  grid-column: 1 / -1;
}

/* 'pequeno' fica dentro de uma coluna existente (ex: .eleFaqIntro), nao e
   item direto do grid da mw-area */
#mw-eleicoes .eleAnuncio--pequeno {
  justify-content: flex-start;
  margin-top: 24px;
}

/* 'lateral' tambem fica dentro de uma coluna existente (ex: .ficha-sidebar) */
#mw-eleicoes .eleAnuncio--lateral {
  margin-top: 20px;
}

/* tamanho fixo por variante - desktop e mobile sao markups diferentes
   (so um deles e renderizado, ver anuncioEleicoes.widget), entao cada
   classe aqui e um valor absoluto, sem @media */
#mw-eleicoes .eleAnuncioBox {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ele-texto-suave);
  background-color: var(--ele-fundo-suave);
  border: 1px solid var(--ele-borda);
}

#mw-eleicoes .eleAnuncioBox--970x250 {
  width: 100%;
  max-width: 970px;
  height: 250px;
}

#mw-eleicoes .eleAnuncioBox--300x250 {
  width: 300px;
  height: 250px;
}

#mw-eleicoes .eleAnuncioBox--300x100 {
  width: 300px;
  height: 100px;
}

#mw-eleicoes .eleAnuncioBox--300x600 {
  width: 300px;
  height: 600px;
}

/* Anuncios colocados pelo CMS nos blocos de widget (widgets/anuncio) entram
   como item direto do grid da mw-area, entao ocupam a linha inteira - o
   tamanho da caixa continua vindo de assets/css/widgets/anuncio/ad.css */
#mw-eleicoes .mw-area > .atr-ad {
  grid-column: 1 / -1;
  grid-row: auto;
}