body {
        font-family: sans-serif;
        margin: 0;
        background-color: #f4f4f4;
    }

    .grid-container {
        display: grid; /* Convertimos este div en un contenedor grid */
        /* Definimos las columnas: 3 columnas de igual ancho (1fr) */
        grid-template-columns: repeat(3, 1fr);
        /* Definimos las filas: una fila de 100px, una que ocupa el espacio restante (auto), y una de 80px */
        grid-template-rows: 100px auto 80px;
        /* Definimos las áreas del grid con nombres */
        grid-template-areas:
            "header header header"
            "sidebar content content"
            "footer footer footer";
        gap: 10px; /* Espacio entre las celdas del grid */
        min-height: 100vh; /* Asegura que ocupe al menos la altura de la ventana */
        padding: 10px;
    }

    .grid-item {
        background-color: #46a049;
        color: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    /* Asignamos los elementos a las áreas definidas */
    .header {
        grid-area: header;
        background-color: #007bff;
    }

    .sidebar {
        grid-area: sidebar;
        background-color: #ffc107;
    }

    .content {
        grid-area: content;
        background-color: #28a745;
    }

    .footer {
        grid-area: footer;
        background-color: #6c757d;
    }

    /* Media query para pantallas más pequeñas */
    @media (max-width: 768px) {
    .grid-container {
    /* En pantallas pequeñas, cambiamos la estructura del grid */
    grid-template-columns: 1fr; /* Una sola columna */
    grid-template-rows: auto auto 1fr auto; /* Filas: header, sidebar, content (ocupa el resto), footer */
    grid-template-areas:
        "header"
        "sidebar"
        "content"
        "footer"; /* Reorganizamos las áreas */
    }

    .sidebar {
        /* Opcional: ajustar el orden visual si es necesario, aunque grid-area ya lo maneja */
        order: 2;
    }

    .content {
        order: 3;
    }

    .footer {
        order: 4;
    }
    }