/* Estilos generales */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 98%;

    }

/* Contenedor de la cuadrícula */
.grid-containere {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas de igual tamaño */
    /* grid-template-rows: 1fr 1fr; 2 filas de igual tamaño */
    height: 100vw; /* Ocupa toda la altura de la pantalla */
    width: 98vw;  /* Ocupa toda la anchura de la pantalla */
    gap: 1px;     /* Espacio entre las cajas (opcional) */
    box-sizing: border-box;
    padding: 1px; /* Un pequeño margen de 10px alrededor */
}

/* Estilos para cada caja */
.grid-itemi {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    font-size: 14px;
    color: #333;
    height: 80%;
    box-sizing: border-box;
}

/* Asignación de identificadores para cada caja */
#box1 { background-color: #abf5aa; }
#box2 { background-color: #cdf1f7; }
#box3 { background-color: #ddddff; }
#box4 { background-color: #ffffdd; }

/* Diseño para pantallas pequeñas */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}