/**
 * Page Builder — Conteúdo do blogpost (exceções Tailwind).
 */

/*
 * Imagens do corpo do artigo.
 *
 * O editor define largura e altura na própria tag (ex.: width="170"). Usar
 * width:100% aqui sobrescrevia esse valor e ampliava imagens pequenas muito
 * além do tamanho real do arquivo, deixando-as serrilhadas — era o caso dos
 * ícones de navegação interna dos guias, de 256x300 exibidos a 902px.
 *
 * max-width limita as imagens grandes à largura da coluna sem esticar as
 * pequenas. height:auto preserva a proporção quando o limite entra em ação.
 */
.cortex-pb-blogpost__body img {
	max-width: 100%;
	height: auto;
}

/* Imagens sem dimensão declarada continuam ocupando a coluna inteira. */
.cortex-pb-blogpost__body img:not([width]) {
	width: 100%;
}

/*
 * O preflight do Tailwind aplica display:block em toda imagem, o que empilha
 * conteúdos que o editor posicionou lado a lado — caso dos ícones de navegação
 * interna dos guias, que ficam num mesmo elemento. Imagens com largura
 * declarada voltam a fluir em linha, como aparecem no editor.
 */
.cortex-pb-blogpost__body img[width] {
	display: inline-block;
	vertical-align: middle;
}