.component-title-sliding-images-texts__mosaic {
    width: 100%;
    padding: var(--padding-y) 0;
    background-color: var(--secondary-50);
}

.component-title-sliding-images-texts--title__mosaic {
    margin-bottom: 3rem;
}

.component-title-sliding-images-texts--content__mosaic {
    --nb-cols: 1;
    display: grid;
    grid-template-columns: repeat(var(--nb-cols), 1fr);
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
}

.component-title-cta-images-caption--tile__mosaic {
    container-name: mosaic-tile;
    container-type: inline-size;

    --gap: .75rem;
    --bgcol: var(--primary-400);

    position: relative;
    background-color: var(--bgcol);
}

.component-title-cta-images-caption--content__mosaic.bleu,
.component-title-cta-images-caption--content__mosaic.blue {
    --bgcol: var(--primary-400);
}

.component-title-cta-images-caption--content__mosaic.blanc,
.component-title-cta-images-caption--content__mosaic.white {
    --bgcol: var(--white);
}

.component-title-sliding-images-texts--content__mosaic:not(.white) .component-title-cta-images-caption--title__mosaic {
    color: var(--primary-700);
}

.component-title-cta-images-caption--tile-inner__mosaic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    padding: 1rem;
    text-align: center;
    overflow: hidden;
}

.component-title-cta-images-caption--title__mosaic {
    margin-bottom: 0.5rem;
}

.bleu .component-title-cta-images-caption--title__mosaic{
    color: inherit;
}

.component-title-cta-images-caption--image__mosaic > .component-title-cta-images-caption--tile-inner__mosaic,
.component-title-cta-images-caption--tile-inner__mosaic picture,
.component-title-cta-images-caption--tile-inner__mosaic img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
}

.component-title-cta-images-caption--image-wrapper__mosaic img {
    --img-size: 3.875rem;
    width: var(--img-size);
    height: var(--img-size);
}

.component-title-cta-images-caption--tile-inner__mosaic .component-cta {
    margin-top: auto;
    padding: 1rem;
    border: none;
    color: transparent;
    line-height: 0;
}

.component-title-cta-images-caption--tile-inner__mosaic .component-cta path,
.component-title-cta-images-caption--tile-inner__mosaic .component-cta circle {
    stroke: var(--primary-700);
    transition: transform var(--transition-time, .25s);
    transform-origin: center center;
}

.component-title-cta-images-caption--tile-inner__mosaic .component-cta:hover {
    background-color: transparent;
}

.component-title-cta-images-caption--tile-inner__mosaic .component-cta:hover path {
    transform: translateX(25%);
}

.component-title-cta-images-caption--tile-inner__mosaic .component-cta:hover circle {
    transform: translateX(-25%) scale(.5);
}

@media screen and (min-width: 48rem) {

    .component-title-sliding-images-texts--content__mosaic {
        --nb-cols: 2;
    }

    .component-title-cta-images-caption--tile-inner__mosaic {
        --gap: 1.5rem;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        padding: 1.5rem;
    }

    .component-title-cta-images-caption--tile__mosaic {
        height: 0;
        padding-bottom: 100%;
    }

    .pageGeneric:not(.home) .component-title-cta-images-caption--tile__mosaic {
        padding-bottom: 85%;
    }

}

@media screen and (min-width: 64rem) /* 1024px */ {

    .component-title-sliding-images-texts--content__mosaic {
        padding: 0 calc(var(--padding-x) * 1.875);
    }

}

@media screen and (min-width: 80rem) /* 1280px */ {

    .component-title-sliding-images-texts--content__mosaic {
        --nb-cols: 3;
    }

    .component-title-cta-images-caption--tile-inner__mosaic {
        --gap: min(1.25vw, 1.5rem);
        padding: var(--gap);
    }

    .component-title-cta-images-caption--image-wrapper__mosaic img {
        --img-size: min(3.385vw, 3.875rem);
    }

    .component-title-cta-images-caption--tile-inner__mosaic .component-cta {
        padding: 0;
        margin-top: 0;
    }

}

@container mosaic-tile (width < 23rem) {
    .component-title-cta-images-caption--text__mosaic p {
        font-size: var(--p-s-size);
    }
}

@container mosaic-tile (width > 80vw) or (width > 25rem) {

    .component-title-cta-images-caption--tile-inner__mosaic {
        justify-content: space-between;
    }

    .component-title-cta-images-caption--content__mosaic {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .component-title-cta-images-caption--tile-inner__mosaic .component-cta {
        margin-top: 0;
    }

}

@container mosaic-tile (width > 80vw) {

    .component-title-cta-images-caption--image-wrapper__mosaic img {
        --img-size: clamp(3.875rem, 15vw, 7.75rem);
    }

    .component-title-cta-images-caption--title__mosaic {
        font-size: clamp(7vw, var(--h3-size), 2.5vw);
    }

    .component-title-cta-images-caption--text__mosaic p {
        font-size: clamp(4vw, var(--p-size), 1.5vw);
    }
}


@container mosaic-tile ((width > 25rem) and (width > 35vw)) and (width < 80vw) {

    .component-title-cta-images-caption--image-wrapper__mosaic img {
        --img-size: clamp(3.875rem, 5vw, 5rem);
    }

    .component-title-cta-images-caption--title__mosaic {
        font-size: clamp(3vw, var(--h3-size), 1vw);
    }

    .component-title-cta-images-caption--text__mosaic p {
        font-size: clamp(1.5vw, var(--p-size), .5vw);
    }
}