/* ---------------------------------------------------------------------------
   Rejilla de módulos del menú principal (base/index).

   Reemplaza los saltos que traían los CSS por resolución (2 columnas desde
   1280px y 4 desde 1900px, sin nada en medio): 1 columna en móvil, 2 desde
   768px y 3 desde 1200px. Se carga después de esos archivos, así que gana.
   --------------------------------------------------------------------------- */

.menuGridParent {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
    column-gap: 12px;
}

@media (min-width: 768px) {
    .menuGridParent {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .menuGridParent {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Un punto más que los 12pt/10pt de los CSS por resolución. Los botones
   "Ingresar" e "Iniciar sesión" no se tocan: los maneja custom-buttons.css. */
.cardTitle {
    font-size: 13pt;
}

.cardText {
    font-size: 11pt;
}

/* Las tarjetas se adaptan al ancho de su columna y crecen si el texto lo pide,
   en vez de quedar recortadas por una altura fija. */
.menuItem {
    height: auto;
    min-height: 146px;
}

.menuSize {
    max-width: none;
    width: 100%;
    height: 100%;
    min-height: 146px;
}