div{
			border-color: lightgray;
			border-style: solid;
			border-width: 1px;
			background-color: #eeeeee;
		}
		.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;
		}

		.foto-1{
			grid-area: f1;
		}

		.foto-2{
			grid-area: f2;
		}

		.foto-3{
			grid-area: f3;
		}

		.foto-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;
		}