div{
	border-color: lightgray;
	border-style: solid;
	border-width: 1px;
	background-color: #eeeeee;
}
@media only screen and (min-width:0px){
	.contenedor{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-areas: 
		"lo lo us us"
		"ti ti ti ti"
		"fp fp fp fp"
		"fp fp fp fp"
		"f1 f1 da da"
		"f2 f2 da da"
		"f3 f3 da da"
		"pi pi pi pi";
		grid-gap: 1em;
		margin: 1em;
		background-color:white;
		border-style: none;
		}
	}
@media only screen and (min-width:600px){
	.contenedor{
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas: 
		"lo lo lo us us"
		"ti ti ti ti ti"
		"da da f1 f2 f3"
		"da da fp fp fp"
		"pi pi pi pi pi";
		grid-gap: 1em;
		margin: 1em;
		background-color:white;
		border-style: none;
	}
}
@media only screen and (min-width:768px){
	.contenedor{
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas: 
		"lo ti ti ti ti us"
		"f1 fp fp fp da da"
		"f2 fp fp fp da da"
		"f3 fp fp fp da da"
		"pi pi pi pi da da";
		grid-gap: 1em;
		margin: 1em;
		background-color:white;
		border-style: none;
		}
}
.logo{
	grid-area: lo;
	background-color: yellow;
}

.titulo{
	grid-area: ti;
	background-color: pink;
}

.usuario{
	grid-area: us;
}

.img1{
	grid-area: f1;
}

.img2{
	grid-area: f2;
}

.img3{
	grid-area: f3;
}

.img-principal{
	grid-area: fp;
}

.datos{
	grid-area: da;
	background-color: lightsteelblue;
}

.pie{
	grid-area: pi;
	background-color:lightgreen;
}

img{
	width: 100%;
	height: auto;
	margin: auto;
	display: block;
}