.composition__elements {
    margin: 2rem 0;
}
.gris {
    background-color: var(--color-gris-fond);
    padding: 1.5rem 0;
}
.composition__elements .d-flex {
    gap: 30px;
}
.citation__filet {
    background-color: var(--color-gris-fond);
    padding: 2rem 2rem 1rem;
    max-width: 500px;
    margin: 2rem auto;
}
.citation__filet .contexte{
    padding: 0 1.25rem;
    border-left: 5px solid var(--color-rouge);
}
.citation__filet p {
    font-family: 'Karma', sans-serif;
    font-weight: 500;
}
.citation__fond {
    background-color: var(--color-rouge);
    padding: 2rem 2rem 1rem;
    max-width: 800px;
    margin: 2rem auto;
    border-radius: 20px;
}
.citation__fond .contexte{
    padding: 0 1.25rem;
    border-left: 5px solid #fff;
}
.citation__fond p {
    font-family: 'Karma', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: #fff;
}
.slide__composition {
    position: relative;
    overflow: hidden;
}
.slide__composition .swiper-slide {
    width: auto;
    position: relative;
}
.slide__composition .swiper-slide::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-gris-fond);
    opacity: .4;
}
.slide__composition  .swiper-slide-active::after {
    opacity: 0;
}
.slide__composition .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: .5rem;
    z-index: 1;
}
.slide__composition .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}
.slide__composition .swiper-pagination-bullet-active {
    background-color: var(--color-rouge);
}
.slide__composition .swiper-button-prev,
.slide__composition .swiper-rtl .swiper-button-next {
    left: 15%;
    color: #fff;
    z-index: 1;
}
.slide__composition .swiper-button-next,
.slide__composition .swiper-rtl .swiper-button-prev {
    right: 15%;
    color: #fff;
    z-index: 1;
}
.slide__composition .swiper-button-next:after,
.slide__composition .swiper-button-prev:after {
    font-size: 4rem;
}
.slide__composition img {
    width: 100%;
    height: auto;
}
.mosaïque.grid {
    margin: 0 auto;
}
.block__images {
    padding: 1rem 0;
    width: calc(33% - 20px);
}
.block__images img {
    width: 100%;
    height: auto;
    display: block;
}
.mosaïque p {
    margin-bottom: 0;
}
.spotlight {
    text-decoration: none;
    color: var(--color-gris);
}
@media (max-width: 900px) {
    .container-md,
    .container-sm,
    .container {        
        max-width: 100%;
        padding: 0 1.5rem;
    }
}
@media (max-width: 800px) {
    .citation__fond,
    .citation__filet {
        max-width: 100%;
        margin: 0 1.5rem;
    }
}
@media (max-width: 600px) {
    .block__images {
        width: calc(50% - 20px);
    }
}