/*************************
 * .layout
 *************************/

.Layout {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
    max-width: 1200px;
}

/*************************
 * #textlayout
 * 
 * Disposition simple
 *************************/

#textlayout {
	display: grid;
	grid-template-areas: 
		"title aside"
		"text aside";
	grid-template-columns: 1fr 300px;
	grid-template-rows: minmax(120px, max-content) auto;
	/*grid-column-gap: 50px;*/
	grid-row-gap: 0;
}


/*************************
 * #cheminlayout
 * 
 *************************/

#cheminlayout {
	display: grid;
	grid-template-areas:
		"context aside"
		"title aside"
		"text aside";
	grid-template-columns: 1fr 300px;
	grid-template-rows: minmax(64px, max-content) minmax(120px, max-content) auto;
	/*grid-column-gap: 50px;*/
	grid-row-gap: 0;
}


/*************************
 * #filmlayout
 * 
 *************************/

#filmlayout {
	display: grid;
	grid-template-areas:
		"blank title aside"
		"poster text aside";
	grid-template-columns: 200px 1fr 300px;
	grid-template-rows: minmax(120px, max-content) auto;
	grid-column-gap: 15px;
	grid-row-gap: 0;
}


/*************************
 * #layout_
 *************************/

#layout_aside {
	grid-area: aside;
}

#layout_content {
	grid-area: content;	
}

#layout_text {
	grid-area: text;
}

#layout_poster {
	grid-area: poster;
}

#layout_title {
	grid-area: title;
	align-self: center;
}

#layout_context {
	grid-area: context;	
}


/*************************
 * @media
 *************************/

@media (max-width: 1099px) {


	#textlayout, #cheminlayout, #filmlayout {
		display: block;
	}

}