/* Variables */
:root {
    --grid-altura-titulo: 30px;
    --grid-altura-herramientas: 35px;
    --grid-separacion-filas: 5px;
    --grid-separacion-columnas: 5px;
    --mitad-grid-separacion-filas: calc(var(--grid-separacion-filas) / 2);
    --mitad-grid-separacion-columnas: calc(var(--grid-separacion-columnas) / 2);
}


.grid-1cx3f-filas-tit-herr-cont {
    display: grid;
    grid-template-columns: 100%;
    /* a la tercer fila le estamos restando los gaps*/
    grid-template-rows: var(--grid-altura-titulo) var(--grid-altura-herramientas) calc(100% - var(--grid-altura-titulo) - var(--grid-altura-herramientas) - var(--grid-separacion-filas) - var(--grid-separacion-filas));
    row-gap: var(--grid-separacion-filas);
    height: 100%;
    width: 100%;
}

.grid-2cx1f-cols-25-75 {
    display: grid;
    grid-template-columns: calc(25% - var(--grid-separacion-columnas)) 75%;
    grid-template-rows: 100%;
    column-gap: var(--grid-separacion-columnas);
    width: 100%;
    height: 100%;
}

.grid-2cx1f-cols-50-50 {
    display: grid;
    grid-template-columns: calc(50% - var(--mitad-grid-separacion-columnas)) calc(50% - var(--mitad-grid-separacion-columnas));
    grid-template-rows: 100%;
    column-gap: var(--grid-separacion-columnas);
    width: 100%;
    height: 100%;
}

.grid-1cx2f-filas-60-40 {
    display: grid;
    grid-template-rows: calc(60% - var(--mitad-grid-separacion-filas)) 40%;
    grid-template-columns: 100%;
    row-gap: var(--grid-separacion-filas);
    width: 100%;
    height: 100%;
}

.grid-1cx2f-filas-40-60 {
    display: grid;
    grid-template-rows: calc(40% - var(--mitad-grid-separacion-filas)) 60%;
    grid-template-columns: 100%;
    row-gap: var(--grid-separacion-filas);
    width: 100%;
    height: 100%;
}

.grid-1cx2f-filas-50-50 {
    display: grid;
    grid-template-rows: calc(50% - var(--mitad-grid-separacion-filas)) calc(50% - var(--mitad-grid-separacion-filas));
    grid-template-columns: 100%;
    row-gap: var(--grid-separacion-filas);
    width: 100%;
    height: 100%;
}


.grid-1cx1f {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
}


@media (max-width: 640px) {

    /* Los demas podrian expandirse tambien para mostrar algo mas coherente */


    .grid-2cx1f-cols-25-75 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50% 100%;
        column-gap: 10px;
        width: 100%;
        height: 100%;
    }

    .grid-2cx1f-cols-50-50 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100% 100%;
        column-gap: 10px;
        width: 100%;
        height: 100%;
    }

}