*{ margin: 0; padding: 0;}
body{ background-color: beige; }
header{
    padding: 2em; display: grid; grid-template-columns: 20% 80%;
    background-color: bisque; text-align: right;
    font-family: arial, Arial, Helvetica, sans-serif; 
}
.logo{width: 200px;}
.aside{display: grid; grid-template-columns: repeat(5,20%); background-color: cadetblue;}
.caja{padding: 2em; background-color: aquamarine; margin: 10px;}
.maincontainer{ padding: 1em;}
.container1{
    clear: both; display: grid;
    grid-template-columns: 33.3% 33.3% 33.4%;
    background-color: cadetblue;
}
article{padding: 1em; text-align: justify;}
.panel1{padding: 1em; background-color: rgb( 151,  255, 130 ); margin: 10px;}
footer{background-color: black; font-family: 'Courier New', Courier, monospace; padding: 1em; color: white; text-align: center;}
.maincontainer>.nav{ background-color: aquamarine; overflow: hidden; }
.nav ul li{float: left; padding-right: 30px;}
.nav ul{ list-style: none; }
.nav ul li a{
    color: black;
    text-decoration: none;
    padding: 20px 20px;
    display: block;
}
.nav ul li a:hover{ background-color: bisque; }
@media screen and (max-width: 700px) {
    .aside .caja{ grid-column: 1 / 6; }
    .container1 .panel1{ grid-column: 1 / 3;}
    .header .titulo{grid-column: 1 / 2 ;}
    .header{ text-align: center; font-size: 50%;}
    .panel1{ width: 100%; }
    .caja{ width: 30%; }
}