.service .cards-with-images {
    --card-bg: #fff;
    --image-bg: linear-gradient(135deg, #EFF6FF 0%, rgba(238, 242, 255, 0.6) 100%);
}

.service .cards-with-images .cards-with-images__card:nth-child(2) {
    --image-bg: linear-gradient(135deg, #ECFDF5 0%, rgba(240, 253, 250, 0.6) 100%);
}

.service .cards-with-images .cards-with-images__card:nth-child(3) {
    --image-bg: linear-gradient(135deg, #F5F3FF 0%, rgba(250, 245, 255, 0.6) 100%);
}

.service .cards-with-images .cards-with-images__card {
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

.service .cards-with-images .cards-with-images__img-wrapper {
    aspect-ratio: 355/420;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.service .cards-with-images .cards-with-images__img-wrapper::before {
    --offset: 16px;
    content: "";
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
}

.service .cards-with-images .cards-with-images__card:nth-child(1) .cards-with-images__img-wrapper::before {
    top: var(--offset);
    right: var(--offset);
    background-image: url('/img/features_chat/service/grid-1.svg');
}

.service .cards-with-images .cards-with-images__card:nth-child(2) .cards-with-images__img-wrapper::before {
    left: var(--offset);
    bottom: var(--offset);
    background-image: url('/img/features_chat/service/grid-2.svg');
}

.service .cards-with-images .cards-with-images__card:nth-child(3) .cards-with-images__img-wrapper::before {
    top: var(--offset);
    left: var(--offset);
    background-image: url('/img/features_chat/service/grid-3.svg');
}

.service .cards-with-images .cards-with-images__text-wrapper {
    padding: 24px;
}

@media screen and (max-width: 765px) {
    .service .cards-with-images .cards-with-images__img-wrapper img {
        max-width: 300px;
    }

    .service .cards-with-images .cards-with-images__img-wrapper {
        aspect-ratio: initial;
        justify-content: center;
    }
}