/*
 * Figuras del cuerpo que crea el puente.
 *
 * Sin esto el tema las pinta a todo el ancho de la columna: en un artículo largo
 * cada imagen ocupa una pantalla entera y el texto deja de leerse como un texto.
 * En pantallas grandes se integran en el párrafo, alternando lado; por debajo se
 * quedan a todo el ancho, que es como mejor se ven en el móvil.
 */

.epcg-article .epcg-figure {
    margin: 1.25rem 0;
}

.epcg-article .epcg-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.epcg-article .epcg-figure figcaption {
    margin-top: .4rem;
    font-size: .85em;
    line-height: 1.35;
    opacity: .85;
}

@media (min-width: 1024px) {
    .epcg-article .epcg-figure {
        float: right;
        width: 42%;
        margin: .3rem 0 1.1rem 2rem;
    }

    .epcg-article .epcg-figure:nth-of-type(even) {
        float: left;
        margin: .3rem 2rem 1.1rem 0;
    }

    /* Un encabezado nunca debe quedar pegado a una figura flotante. */
    .epcg-article h2,
    .epcg-article h3 {
        clear: both;
    }
}