.img3,
.img4,
.img9,
.img10,
.img11,
.img12,
.img13,
.img14,
.img15,
.img18 {
    grid-column: auto;
}

.img16 {
    grid-column: 2 / span 2;
}

.img2,
.img5,
.img17 {
    grid-column: 1 / span 2;
}

/* -------------------------------------- */
/* Pour l'image avec les gif */
/* -------------------------------------- */

.img16 {
    position: relative;
}

.img16B {
    display: none;
}

.gif300x250,
.gif300x600,
.gif970x250 {
    position: absolute;
    z-index: 2;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.30);
}

.gif300x250 {
    background-image: url(../img/projects/POffres/gif1.gif);
    top: 63.5%;
    left: 71.2%;
    height: 19.8%;
    width: 17.8%;
}

.gif300x600 {
    background-image: url(../img/projects/POffres/gif2.gif);
    top: 14.1%;
    left: 11.4%;
    height: 47.6%;
    width: 18%;
}

.gif970x250 {
    background-image: url(../img/projects/POffres/gif3.gif);
    top: 63.5%;
    left: 11.4%;
    height: 19.8%;
    width: 58.5%;
}

/* -------------------------------------- */
/* Sous-titres 2, 3 et 4 */
/* -------------------------------------- */

#projectSubtitleOffres2,
#projectSubtitleOffres3,
#projectSubtitleOffres4 {
    grid-column: 1 / span 3;
    margin-top: 60px;
}

/* -------------------------------------- */
/* Changement des images en carré pour la talette
   ou séparation en deux images A et B */
/* -------------------------------------- */

.img3A,
.img3B,
.img4bis,
.img10bis,
.img17bis {
    display: none;
}

/* -------------------------------------- */
/* M E D I A S   Q U E R I E S */
/* -------------------------------------- */

@media (max-width: 768px) {

    .project-grid {
        grid-template-rows: auto;
    }

    .img3,
    .img4,
    .img9,
    .img10,
    .img11,
    .img12,
    .img13,
    .img14,
    .img15,
    .img16,
    .img17,
    .img18 {
        grid-column: auto;
    }

    #projectSubtitleOffres2,
    #projectSubtitleOffres3,
    #projectSubtitleOffres4,
    .img2,
    .img5 {
        grid-column: 1 / span 2;
    }

    /* Changer les images en carré */
    .img3A,
    .img3B,
    .img4bis,
    .img10bis,
    .img17bis {
        display: block;
    }

    .img3,
    .img4,
    .img10,
    .img17 {
        display: none;
    }

    .img10bis {
        grid-column: 1 / span 2;
    }

    /* Pour le gif */
    .gif300x250,
    .gif970x250 {
        display: none;
    }

    .gif300x600 {
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        height: 70%;
        width: 54%;
    }

    .img16B {
        display: block;
    }

    .img16A {
        display: none;
    }
}

@media (max-width: 450px) {

    #projectSubtitleOffres2,
    #projectSubtitleOffres3,
    #projectSubtitleOffres4 {
        grid-column: 1 / span 1;
    }

    .img2,
    .img5 {
        grid-column: 1 / span 1;
    }

    /* Remettre en rectangle les images */
    .img3A,
    .img3B,
    .img4bis,
    .img10bis,
    .img17bis {
        display: none;
    }

    .img3,
    .img4,
    .img10,
    .img17 {
        display: block;
    }

    /* Pour le gif */
    .gif300x250 {
        display: block;
        top: 63.5%;
        left: 71.2%;
        height: 19.8%;
        width: 17.8%;
        border-radius: 4px;
    }

    .gif300x600 {
        transform: none;
        top: 14.1%;
        left: 11.4%;
        height: 47.6%;
        width: 18%;
        border-radius: 4px;
    }

    .gif970x250 {
        display: block;
        top: 63.5%;
        left: 11.4%;
        height: 19.8%;
        width: 58.5%;
        border-radius: 4px;
    }

    .gif300x250 img,
    .gif300x600 img,
    .gif970x250 img {
        border-radius: 4px;
    }

    .img16A {
        display: block;
    }

    .img16B {
        display: none;
    }

    /* Trop d'images en mobile */
    .img14,
    .img10 {
        display: none;
    }
}