/* EA4AC Modern 0.1.29
 * Las descripciones de Tutoriales, FT8 y FT4 no deben ser mas anchas
 * que la primera tarjeta (1/3 de la cuadricula en escritorio).
 * No depende de JavaScript: se aplica antes de mostrar la portada.
 */
@media (min-width: 781px) {
    body.home .ea4ac-home-blocks section.section[aria-labelledby^="section-"] > .section-heading > div {
        box-sizing: border-box;
        width: calc((100% - 42px) / 3) !important;
        max-width: calc((100% - 42px) / 3) !important;
        flex: 0 0 calc((100% - 42px) / 3) !important;
        min-width: 0;
    }
}

/* Entre 581 y 780 px la cuadricula muestra dos tarjetas por fila. */
@media (min-width: 581px) and (max-width: 780px) {
    body.home .ea4ac-home-blocks section.section[aria-labelledby^="section-"] > .section-heading > div {
        box-sizing: border-box;
        width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
        flex: 0 0 calc((100% - 16px) / 2) !important;
        min-width: 0;
    }
}

body.home .ea4ac-home-blocks section.section[aria-labelledby^="section-"] > .section-heading > div > p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

/* En movil la tarjeta ocupa toda la fila y se permite todo su ancho. */
@media (max-width: 580px) {
    body.home .ea4ac-home-blocks section.section[aria-labelledby^="section-"] > .section-heading {
        flex-wrap: wrap;
    }
    body.home .ea4ac-home-blocks section.section[aria-labelledby^="section-"] > .section-heading > div {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}
