/* ----- IMAGE RESPONSIVE ----- */

.imageresponsive.image.cmp-res-image__primary-red .cmp-image__title {
  color: var(--ShA-primary__red);
}
.imageresponsive.image.cmp-res-image__primary-black .cmp-image__title {
  color: var(--ShA-primary__black);
}
.imageresponsive.image.cmp-res-image__primary-white .cmp-image__title {
  color: var(--ShA-primary__white);
}
.imageresponsive.image.cmp-res-image__primary-button-grey .cmp-image__title {
  color: var(--ShA-primary__button-grey);
}


@media (min-width: 320px) {

    .cmp-image .cmp-image__image-res {
        display: none;
        height: auto;
    }
    .res-mobile {
        display: block;
        width: 100%;
        height: auto;
    }
    .res-mobile .cmp-image__image-res-mobile {
        width: 100%;
    }
    .imageresponsive .cmp-image__title {
        display: none;
    }
    .res-mobile .cmp-image__title {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0%, -50%);
        margin-left: 0px;
        margin-right: 0px;
        padding-right: var(--bs-gutter-x, 0.75rem);
        padding-left: var(--bs-gutter-x, 0.75rem);
        text-align: center;
    }
    .imageresponsive .cmp-image {
        position: relative;
    }
}


@media (min-width: 768px) {
    .imageresponsive .cmp-image__title {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0%, -50%);
        margin-left: 8.33333333%;
        margin-right: 8.33333333%;
        padding-right: var(--bs-gutter-x, 0.75rem);
        padding-left: var(--bs-gutter-x, 0.75rem);
        display: block;
    }

    .cmp-image .cmp-image__image-res {
        display: block;
        width: 100%;
    }
    .res-mobile {
        display: none;
    }
    .res-mobile .cmp-image__title {
        display: none;
    }
}

@media (min-width: 1440px) {
    .imageresponsive .cmp-image__title {
        margin-left: 16.66666667%;
        margin-right: 16.66666667%;
    }
}