.hero-histoire {
    background: var(--Blue-Light, #E6F5FE);
    box-shadow: 10px 8px 31.8px 0 rgba(0, 81, 131, 0.10);
    min-height: 400px;
}

.hero-histoire .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100%;
}

.hero-propos .bg-image {
    max-width: 787.072px;
    height: auto;
    object-fit: contain;
}

.hero-propos .images {
    justify-content: center !important;
}

.hero-propos .images img {
    width: 100%;
    max-width: 299px;
    max-height: 299px;

}

.hero .image-group {
    width: 299px !important;
    height: 299px !important;
    object-fit: cover !important;
    border-radius: 50%;
    background: url(<path-to-image>) lightgray 50% / cover no-repeat, var(--Blue-Light, #E6F5FE);

    /* Shadow blue */
    box-shadow: 10px 8px 20px 0 rgba(0, 81, 131, 0.25);
}

.hero .images .box {
    width: 406.579px;
    height: 406.579px;
    border-radius: 50%;
    background: var(--Blue-Light, #E6F5FE);
    /* Shadow blue */
    box-shadow: 10px 8px 20px 0 rgba(0, 81, 131, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .images .box img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

@media(max-width:1200px) {
    .hero-histoire .bg-img {
        object-fit: cover;
        max-height: none;
        height: 100%;
        max-width: none;
    }
    .hero .images .box {
    width: 306.579px;
    height: 306.579px;
    }
}

@media(max-width:992px) {}

@media(max-width:768px) {}

@media(max-width:570px) {}