.home-content {
    margin: 0 10%;
}

.home-content h2{
    font-family: roboto;
    font-size: 25px;
}

.Conteneur_espace-echange{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;
    position: relative;
}

.espace-echange-image{
  height: 100%;
  background-image: url("https://intranet.penet-plastiques.fr/wp-content/themes/themepenet/images/test/Home_espace-echange.jpg");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  border-radius: 15px;
}

.espace-echange img{
    width: 100%;
}

.espace-echange-texte{
    position: absolute;
    bottom: 0px;
    left: 0rem;
    background-color: #0099cc;
    width: 25%;
    height: 250px;
    max-height: 40%;
    color: white;
    text-align: center;
    place-items: center;
    display: grid;
    border-radius: 0 15px 0 15px;
}

.espace-echange-texte:hover{
    background-color: #339933;
}

.repertoireetautres{
    display: grid;
    grid-template-columns: 33% calc(66% - 20px);
    grid-gap: 20px;
    position: relative;
    text-align: center;
    min-height: 500px;
    overflow: hidden;
}

.repertoireetautres a{
    background-color: #0099cc;
    color: white;
    text-align: center;
    place-items: center;
    display: grid;
    border-radius: 10px;
}

#rep{
    background-color: grey;
}

#rep:hover{
    background-color: #339933;
}

.repertoireetautres a:hover{
    background-color: #339933;
}

.Documents{
    background-color: grey;
    padding: 5%;
    margin-top: 20px;
    color: white;
}

.chantier-exeptionnel{
    margin-top: 20px;
    background-image: url("https://intranet.penet-plastiques.fr/wp-content/themes/themepenet/images/test/petit-caux.jpg");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
    height: 150px;
    display: block;
    border-radius: 10px;
}

.chantier-exeptionnel h2{
    background-color: grey;
    padding: 5px 15px ;
    color: white;
    width: fit-content;
    border-radius: 10px 0 10px 0;
}

.chantier-exeptionnel h2:hover{
    background-color: #339933;
}

@media only screen and (max-width: 1300px){

    .home-content {
        margin: 0;
    }
}

@media only screen and (max-width: 850px){

    .Conteneur_espace-echange {
        display: flex;
        flex-direction: column;
    }

    .espace-echange-image{
        height: 350px;
        margin-bottom: 20px;
    }

    .espace-echange-texte{
        position: initial;
        width: 100%;
        border-radius: 15px;
    }

    .repertoireetautres {
        display: flex;
        flex-direction: column-reverse;
    }

    .repertoireetautres a{
        padding: 20px 0;
    }
      
}