body{
    min-height: 140vh;
}
main{
    height: auto;
    align-items: center;
    justify-content: center;
    margin-bottom: 500px;
}

.overlay-image {
    position: absolute;
    display: inline-block;
    max-width: 15vw;
    max-height: 15vw;
}

.overlay-image .image {
    display: inline;
    width: 15vw;
    height: 15vw;
}

.overlay-image .hover {
    position: absolute;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0,0,0,0.5);
    /*box-shadow: -1px 2px 70px 3px rgba(236, 8, 236, 0.7);*/
}
   
.overlay-image:hover .hover {
    opacity: 1;
}

.overlay-image .hover2 {
    position: absolute;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0,0,0,0.5);
}

.overlay-image:hover .hover2 {
    opacity: 1;
}

.image3:hover {
    display: block;
    position: absolute;
    float: left;
    line-height: 1px;
}

.image2, .image3, .hover, .hover2{
    height: 14.1vw;
    width: 14.1vw;
    top: 3.5%;
    right: 3%;
}

/* Layout des cadres */
.A{
    top: 30%;
    right: 42%;
}

.B{
    right: 69%;
    top: 45%;
}

.C{
    right: 15%;
    top: 45%;
}

.D{
    right: 60%;
    top: 85%;
}

.E{
    right: 25%;
    top: 85%;
}

/*--------------Responsive-------------------*/

@media(max-width: 768px){ /*Tablettes*/
    .A, .B, .C, .D, .E{
        position: relative;
        top: 0px;
        right: 0px;
        max-width: 100vw;
        max-height: 100vw;
        width: 70vw;
        height: 70vw;
    }
    h1{
        position: relative;
        top: 0px;
        bottom: 0px;
        right: 0px;
    }
    .overlay-image .image{
        width: 70vw;
        height: 70vw;
    }
    .image2, .image3, .hover, .hover2{
        width: 66.5vw;
        height: 66.5vw;
        top: 2.9%;
        right: 2.5%;
    }
}