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

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

/* -------------------------------------- */
/* Image summer V1 : split en 2 images disctinctes en Tablette et Mobile */
/* -------------------------------------- */

.img13A,
.img13B {
    display: none;
}

.im3,
.img4,
.img5,
.img6,
.img7,
.img8 {
    grid-column: auto;
}

/* -------------------------------------- */
/* Pour le gif */
/* -------------------------------------- */

.img12,
.img5,
.img16 {
    position: relative;
}

.gif {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    z-index: 2;
    height: 80%;
    width: 40%;
    background-image: url(../img/projects/PNoel/PNoel-V8.gif);
    background-size: cover;
    border-radius: 10px;
    border: solid 0.5px gray;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.30);
}

.gif2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    height: 50%;
    width: 60%;
    background-size: cover;
    border-radius: 10px;
    border: solid 0.5px gray;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.30);
    background-image: url(../img/projects/PNoel/PNoel-V4.gif);
}

.gif3 {
    position: absolute;
    top: 50%;
    left: 49%;
    transform: translate(-50%, -50%);
    z-index: 2;
    height: 80%;
    width: 50%;
    background-size: cover;
    border-radius: 10px;
    border: solid 0.5px gray;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.30);
    background-image: url(../img/projects/PNoel/PAutomne-V2.gif);
}

/* -------------------------------------- */
/* Marges sous-titres N°2 et N°3 */
/* -------------------------------------- */

#projectSubtitleNoel,
#projectSubtitleNoel3 {
    margin-top: 60px;
}

/* -------------------------------------- */
/* Summer grid */
/* -------------------------------------- */

.project-grid2,
.project-grid3 {
    /* toute la largeur du main moins les 2 gaps entre les 3 colonnes */
    width: calc(100% - 2 * var(--marginIMG));
    display: grid;
    /* 3 paramètres donc 3 colonnes :
    en l'occurence 3 colonnes de calc(100% / 3) */
    grid-template-columns: calc(var(--gridDesktop) / 3) calc(var(--gridDesktop) / 3) calc(var(--gridDesktop) / 3);
    gap: var(--marginIMG);
    overflow: hidden;
    grid-template-rows: auto;
}

.project-grid2 h1,
.project-grid3 h1 {
    grid-column: 1 / span 3;
}

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

@media (max-width: 768px) {

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

    /* height change de pourcentage car en Tablette, le gif est à droite d'une image plus grande */
    .gif2 {
        height: 39%;
        border-radius: 6px;
    }

    .gif {
        border-radius: 6px;
    }

    .gif3 {
        border-radius: 6px;
    }

    .project-grid2,
    .project-grid3 {
        width: calc(100% - var(--marginIMG));
        grid-template-columns: calc(var(--gridDesktop) / 2) calc(var(--gridDesktop) / 2);
    }

    .project-grid2 h1,
    .project-grid3 h1 {
        grid-column: 1 / span 2;
    }

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

    /* Pour l'image summer V1 coupée en deux */
    .img13A,
    .img13B {
        display: block;
    }

    .img13 {
        display: none;
    }
}

@media (max-width: 450px) {

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

    .txtTablet {
        grid-column: 1 / span 1;
    }

    .img2,
    .img3,
    .img4,
    .img5,
    .img9,
    .img10,
    .img11,
    .img12,
    .img13,
    .img14,
    .img13A,
    .img13B,
    .img15,
    .img16 {
        grid-column: 1 / span 1;
    }

    /* En mobile on retrouve un carré basique comme en desktop */
    .gif2 {
        height: 50%;
        width: 60%;
        border-radius: 5px;
    }

    .gif {
        border-radius: 5px;
    }

    .gif3 {
        border-radius: 5px;
    }

    /* Trop d'images en mobile */
    .img9,
    .img11,
    .img5 {
        display: none;
    }

    .project-grid2,
    .project-grid3 {
        width: 100%;
        grid-template-columns: 100%;
    }

    .project-grid2 h1,
    .project-grid3 h1 {
        grid-column: auto;
    }

    /* Pour l'image summer V1 coupée en deux */
    .img13A,
    .img13B {
        display: none;
    }

    .img13 {
        display: block;
    }
}