.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}



body{
	background-color: black;}

#conteneur{
	width: 1200px;
	height: 700px;
	margin: 100px auto;

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

}



#premier{
	grid-column: 1/2;
	grid-row: 1/3;
	background-image: url(../import/apercus/01_decolage2.jpg);
}
#premier:hover{
	background-image: url(../import/gif/01_decolage.gif);
}

#deuxieme{
	grid-column: 2/4;
	grid-row: 1/2;
	background-image: url(../import/apercus/02_news.jpg);
}

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

#troisieme{
	grid-column: 4/6;
	grid-row: 1/2	;
	background-image: url(../import/apercus/03_tracts3.jpg);
}

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

#quatrieme{
	grid-column: 2/3;
	grid-row: 2/3;
	background-image: url(../import/apercus/04_mutation.jpg);
}

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

#cinquieme{
	grid-column: 3/5;
	grid-row: 2/3;
	background-image: url(../import/apercus/05_vitre2.jpg);
}

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

#sixieme{
	grid-column: 5/6;
	grid-row: 2/4;
	background-image: url(../import/apercus/06_crash2.jpg);
}

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

#septieme{
	grid-column: 1/3;
	grid-row: 3/4;
	background-image: url(../import/apercus/07_destruction2.jpg);
}

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

#huitieme{
	grid-column: 3/5;
	grid-row: 3/4;
	background-image: url(../import/apercus/08_catastrophe2.jpg);
}

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


article{
	font-family: "Roboto";
	color: white;
	text-transform: uppercase;

}

p{
	margin: 8px;
}