.container {
	
  display: grid;
  grid-template-columns: 380px 415px 640px;
  grid-template-rows: 0fr 1fr 0fr;
  
  grid-auto-flow: row;
  grid-template-areas:
    "head head head"
    "middle right left"
    "bottom bottom bottom";
}

.head { grid-area: head;

text-align:center;
font-size:30px;
padding-block: 20px;
	

}

.left { grid-area: left;
	height:400px;
	
	 
	

}

.middle { grid-area: middle;

	font-size:30px;
	text-align: center;
	color: white;
	
	background:#636363;
	height:400px;
	width:370px;
	z-index:0;
	
}


.inmiddle{
	padding-top:20px;
padding-left:20px;
	padding-right:20px;
}



.right { grid-area: right; 

background:#636363;
	height:400px;
	width:406px;
	
	
}

.bottom { grid-area: bottom; }


#preview {
	
	position:absolute;
    
	z-index:-2;
}

img{
height:400px;	
	width:406px;
	position:absolute;
	
	z-index:-1;
	
}
.example{
	
z-index:2;	
	
}

.frame{
	
width:640px;
	height:400px;
	
}