body{
    background-color: rgb(255, 255, 255);
}

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

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


#premier{
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url(../animation/rendu/apercu/r1.png);
    background-size: 100%;
}


#premier:hover{
  background-image: url(../animation/rendu/r_1.gif);
}

#deuxieme{
    grid-column: 3/4;
    grid-row: 1/2;
    background-image: url(../animation/rendu/apercu/r2.png);
    background-size: 100%;
}

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

#troisieme{
    grid-column: 4/6;
    grid-row: 1/3;
    background-image: url(../animation/rendu/apercu/r3.png);
    background-size: 100%;
}

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

#quatrieme{
    grid-column: 1/2;
    grid-row: 2/4;
    background-image: url(../animation/rendu/apercu/r4.png);
    background-size: 100%;
}

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

#cinquieme{
    grid-column: 2/3;
    grid-row: 2/3;
    background-image: url(../animation/rendu/apercu/r5.png);
    background-size: 100%;
}

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

#sixieme{
    grid-column: 3/4;
    grid-row: 2/3;
    background-image: url(../animation/rendu/apercu/r6.png);
    background-size: 100%;
}

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

#septieme{
    grid-column: 2/5;
    grid-row: 3/4;
    background-image: url(../animation/rendu/apercu/r7.png);
    background-size: 100%;
}

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

#huitieme{
    grid-column: 5/6;
    grid-row: 3/4;
    background-image: url(../animation/rendu/apercu/r8.png);
    background-size: 100%;
}

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