.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    min-height: 100vh;
}

.header { 
    grid-area: header;
    background-color: #ff9999;
    padding: 20px;
}

.nav {
    grid-area: nav;
    background-color: #99ff99;
    padding: 20px;
}

.main {
    grid-area: main;
    background-color: #9999ff;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ffff99;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #ff99ff;
    padding: 20px;
}

/* Diseño responsive para pantallas menores a 768px */
@media (max-width: 768px) {
    .grid-container {
        grid-template-areas: 
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}