body{
	background-color: black;
}

#conteneur{
	width: 1200px;
	margin: 120px auto;
	height: 670px;

	display: grid;
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr ;
	grid-gap: 20px;
}

article{
	border: 1px solid black;
}

#premier{
	grid-column: 1/3;
	grid-row: 1/3;
	background-color: black;
}

#premier:hover{
	background-image: url(../image/rectangle_1.gif);*
}

#deuxieme{
	grid-column: 3/5;
	grid-row: 1/2;
	background-color: black;
}

#deuxieme:hover{
	background-image: url(../image/rectangle_2.gif);
}


#troisieme{
	grid-column: 5/6;
	grid-row: 1/4;
	background-color: black;
}

#troisieme:hover{
	background-image: url(../image/rectangle_3.gif);
}


#quatrieme{
	grid-column: 3/4;
	grid-row: 2/3;
	background-color: black;
}

#quatrieme:hover{
	background-image: url(../image/rectangle_4.gif);
}

#cinquieme{
	grid-column: 4/5;
	grid-row: 2/3;
	background-color: black;
}

#cinquieme:hover{
	background-image: url(../image/rectangle_5.gif);
}


#sixieme{
	grid-column: 1/2;
	grid-row: 3/4;
	background-color: black;
}

#sixieme:hover{
	background-image: url(../image/rectangle_6.gif);
}

#septieme{
	grid-column: 2/4;
	grid-row: 3/4;
	background-color: black;
}

#septieme:hover{
	background-image: url(../image/rectangle_7.gif);
}

#huitieme{
	grid-column: 4/5;
	grid-row: 3/4;
	background-color: black;
}

#huitieme:hover{
	background-image: url(../image/rectangle_8.gif);
}