.body {
    background-color: rgb(210, 195, 187);

}

.section {
    text-align: center;

}

.grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 30px auto;
}

.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 220px;
    cursor: pointer;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    display: block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.contacts {
    max-width: 20%;
    max-height: 20%;
}

.image-container:hover img {
    opacity: 0.8;
    transform: scale(1.05);
}

.texte-centre {
    position: absolute;
    left: 50%;
    bottom: 40%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: black;
    font-size: 1.4em;
    font-family: arial;
    text-align: center;
    transition: color 0.4s ease,
}

.image-container.alberto:hover .texte-centre {
    color: rgba(0, 85, 255, 0.849);
}

.image-container.jose:hover .texte-centre {
    color: rgb(211, 45, 37);
}

.image-container.martin:hover .texte-centre {
    color: rgb(104, 255, 96);
}

@media (max-width: 600px) {
    .grille {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 20px;
    }

    .image-container {
        height: 180px;
    }

    .contacts {
        max-width: 80%;
        max-height: none;
    }

    body {
        margin-top: 20px;
    }

    .texte-centre {
        font-size: 1.2em;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .grille {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 30px;
    }

    .image-container {
        height: 200px;
    }

    .contacts {
        max-width: 40%;
        max-height: none;
    }

    .texte-centre {
        font-size: 1.3em;
    }
}

@media (min-width: 2000px) {
    .grille {
        max-width: 1200px;
    }

    .image-container {
        height: 300px;
    }

    .contacts {
    max-width: 12%;
    max-height: 12%;
}
}