main {
    display: flex;
}

.colGauche {
    width: 46.5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 3.25%;
    margin-top: 100px;
    margin-bottom: 100px;
}
.colDroit {
    width: 46.5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 0.8%;
    margin-top: 100px;
    margin-bottom: 100px;
}
.contain_gauche {
    width: 49%;
    display: flex;
    flex-direction: column;
}
.contain_droite {
    width: 49%;
    display: flex;
    flex-direction: column;
}

.colDroit img {
    width: 100%;
    margin-top: 8px;
}
.colGauche img {
    width: 100%;
    margin-top: 8px;
}

/** effet de slide **/

.image {
    opacity: 0;
    transform: translateY(150px);
    transition: opacity 1s ease, transform 1s ease;
}

.image.visible {
    opacity: 1;
    transform: translateY(0);
}

.image:hover {
    cursor: pointer;
}

@media (max-width: 840px) {
    .colDroit, .colGauche {
        flex-direction: column;
    }
    .contain_droite, .contain_gauche {
        width: 100%;
    }
}