* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

.grid-layout1 {
    display: grid;
    grid-template-areas:
        "cabecera cabecera cabecera"
        "nav      nav      nav"
        "aside    main     main"
        "pie      pie      pie";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 10px;
    min-height: 100vh;
    padding: 10px;
}

.grid-layout1 > * {
    padding: 20px;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cabecera { grid-area: cabecera; background: #1e3a8a; }
.nav      { grid-area: nav;      background: #2563eb; }
.aside    { grid-area: aside;    background: #7c3aed; }
.main     { grid-area: main;     background: #0f766e; }
.pie      { grid-area: pie;      background: #334155; }

@media (max-width: 768px) {
    .grid-layout1 {
        grid-template-areas:
            "cabecera"
            "nav"
            "aside"
            "main"
            "pie";
        grid-template-columns: 1fr;
    }
}