*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*esto se utiliza más que nada cuando tenemos muchas cajas*/
}

body {
    background-color: rgb(206, 206, 206);
    
}

header {
    background-color: rgb(151, 151, 151);
    width: 48rem;
    margin: auto;
    height: 6rem;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between; /*uno en cada punta*/
    padding: 1.5rem;
}

nav {
    background-color: black;
    color: aliceblue;
    width: 20rem;
    min-height: 3rem; /*un contenido que podría variar, como un menú..entonces 
    se acomodan las cosas de forma más sencillo sin que cambie de dimensiones 
    cuando se achique la págiina*/
}

section {
    background-color: burlywood;
    display: grid; /*que la sección se acomode como una GRILA*/
    /*grid-template-columns: auto auto; /*mientras más ponga, más divide*/
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

article {
    background-color: rgb(255, 238, 0);

    height: 4rem;
}


aside {
    background-color: cornflowerblue;
    min-height: 18rem;
    width: 18rem;
}
/*Cuando hay que armar una estructura, hay que pensar cuál es el proyecto y
los valores que necesito*/

footer {
    width: 48rem;
    margin: auto;
    background-color: rgb(72, 72, 72);
    color: antiquewhite;
    min-height: 4rem;
}

.logo{ /*etiqueta genérica, de caja*/
    width: 4rem;
    height: 1.6rem;
    background-color: brown;
    margin: 1rem 0rem 1rem 3rem;
    padding: 1rem;
} 

.contenedor{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 48rem;
    margin: auto;
    background-color: blue;
}