/* BLOCK `image_with_text` */
.image-with-text__card {
    border-radius: var(--radius-semilarge);

    img {
        height: 100% !important;
    }

    .default > div {
        height: 100%;
    }

    .image-with-text__content {
        @media screen and (min-width: 768px) {
            padding: calc(var(--spacing) * 16) 0 calc(var(--spacing) * 16) 0;
        }

        h2:first-child {
            padding: calc(var(--spacing) * 4) calc(var(--spacing) * 12);
            border-radius: var(--radius-semilarge);
        }
    }

    &:not(.image-with-text__reversed) .image-with-text__content {
        margin-right: calc(var(--spacing) * 16);

        @media screen and (max-width: 768px) {
            margin: 0;
        }
    }

    &.image-with-text__reversed .image-with-text__content {
        margin-left: calc(var(--spacing) * 16);

        @media screen and (max-width: 768px) {
            margin: 0;
        }
    }
}

.image-with-text__color-primary {
    background-color: var(--color-primary);

    .image-with-text__content h2:first-child {
        background-color: var(--color-primary-dark);
        color: var(--color-green-light) !important;
    }
}

.image-with-text__color-primary_light {
    background-color: var(--color-primary-light);

    .image-with-text__content h2:first-child {
        background-color: var(--color-primary);
        color: #fff !important;
    }
}

.image-with-text__color-pink {
    background-color: var(--color-pink);

    .image-with-text__content h2:first-child {
        background-color: var(--color-pink-light);
        color: var(--color-pink-dark) !important;
    }

    ul > li::before {
        background: white !important;
    }
}

.image-with-text__color-pink_light {
    background-color: var(--color-pink-light);

    .image-with-text__content h2:first-child {
        background-color: var(--color-pink);
        color: #fff !important;
    }

    ul > li::before {
        background: var(--color-pink-dark) !important;
    }
}

.image-with-text__color-pink_dark {
    background-color: var(--color-pink-dark);

    .image-with-text__content h2:first-child {
        background-color: var(--color-pink);
        color: #fff !important;
    }

    ul > li::before {
        background: var(--color-pink-light) !important;
    }
}

.image-with-text__color-blue {
    background-color: var(--color-blue);

    .image-with-text__content h2:first-child {
        background-color: var(--color-blue-dark);
        color: var(--color-blue-light) !important;
    }

    ul > li::before {
        background: white !important;
    }
}

.image-with-text__color-blue_light {
    background-color: var(--color-blue-light);

    .image-with-text__content h2:first-child {
        background-color: var(--color-blue-dark);
        color: #fff !important;
    }

    ul > li::before {
        background: var(--color-blue-dark) !important;
    }
}

.image-with-text__color-blue_dark {
    background-color: var(--color-blue-dark);

    .image-with-text__content h2:first-child {
        background-color: var(--color-blue);
        color: #fff !important;
    }

    ul > li::before {
        background: white !important;
    }
}

.image-with-text__color-primary_dark {
    background-color: var(--color-primary-dark);

    ul > li::before {
        background: white !important;
    }

    .image-with-text__content h2:first-child {
        background-color: var(--color-primary-light);
        color: var(--color-primary-dark) !important;
    }
}

.background-block.container > div > :not(.container) {
    .image-with-text:not(.image-with-text__reversed) > div:first-child {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .image-with-text__reversed > div:first-child {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* BLOCK `image_with_text` - END */

.background-block .container > .image-with-text img:not(.logo), .container > .image-with-text.image-with-text__color-inverted img:not(.logo) {
    height: 100%;
}

.image-with-text {
    display: grid;
    gap: calc(var(--spacing) * 16);
    grid-template-columns: repeat(2, 1fr);

    > div {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;

        &.div-logo {
            align-items: end;
        }
    }

    > div:first-child {
        order: 1;
    }

    > div:last-child {
        order: 2;
    }

    &.image-with-text__reversed {
        > div:first-child {
            order: 2;
        }

        > div:last-child {
            order: 1;
        }
    }

    img:not(.logo) {
        border-radius: var(--radius-semilarge);
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    h3 {
        color: var(--color-primary-dark) !important;
        font-family: var(--font-livvic) !important;
        font-size: 30px !important;
        font-weight: 500 !important;
        line-height: 38px !important;
    }

    .image-with-text__content {
        padding: calc(var(--spacing) * 8) 0;
    }

    .contacts-list {
        display: block;

        .contact {
            width: 505px;

            h3 {
                color: var(--color-primary-dark) !important;
            }
        }
    }

    .anim1 {
        position: relative;
        height: fit-content;
        justify-content: center;

        img {
            max-width: 500px;
            object-fit: cover;
            border-radius: 0;
            border-bottom-left-radius: 250px;
            border-bottom-right-radius: 250px;
        }

        &:before {
            content: '';
            width: 180px;
            aspect-ratio: 1/1;
            position: absolute;
            bottom: -32px;
            left: -32px;
            border-bottom-left-radius: 250px;
            border-left: 18px solid var(--color-primary-dark);
            border-bottom: 18px solid var(--color-primary-dark);
        }
    }

    .anim2 {
        display: flex;
        justify-content: end;

        img {
            object-fit: cover;
        }

        & > div {
            position: relative;
            width: fit-content;
            aspect-ratio: 1/1;

            &::before {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                left: -20%;
                top: -10%;
                border-radius: 50%;
                background: var(--color-bouboute);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .image-with-text {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing) * 1);
    }
}