.image-with-content {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
}

.image-with-content {
    .image-with-content_main {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }

    .img_cont_blocks_image {
        width: 100%;
    }

    .img_cont_blocks_image img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        transition: all .3s ease-out;
    }

    .img_cont_blocks_cont {
        position: absolute;
        bottom: 20px;
        padding: 20px 50px;
    }

    .img_cont_blocks {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%;
        overflow: hidden;
    }

    .title {
        color: var(--color);
        line-height: 1.2;
    }

    .title.title3 {
        font-size: 30px;
        margin: 0 0 10px 0;
    }

    .desc {
        color: var(--desc-color);
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    a.button {
        color: var(--btn-color);
        background: var(--btn-bg);
        border-radius: 30px;
        padding: 7px 32px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.3;
        text-transform: capitalize;
        position: relative;
        overflow: hidden;
    }

    a.button::after,
    a.button::before {
        content: unset;
    }

    a.button span.top-text,
    a.button span.top-text {
        transform: translateY(0%);
        transition: all 0.3s ease;
    }

    a.button span.bottom-text,
    a.button span.bottom-text {
        position: absolute;
        transform: translateY(200%);
        transition: all 0.3s ease;
    }

    a.button:hover span.top-text,
    a.button:hover span.top-text {
        transform: translateY(-200%);
        transition: all 0.3s ease;
    }

    a.button:hover span.bottom-text,
    a.button:hover span.bottom-text {
        transform: translateY(0%);
        transition: all 0.3s ease;
        color: #000;
    }

    @media (max-width:749px) {
        .img_cont_blocks {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .title.title3 {
            font-size: 20px;
            margin: 0 0 5px 0;
        }

        .desc {
            font-size: 12px;
            margin-top: 0;
            margin-bottom: 5px;
        }

        a.button {
            padding: 8px 30px;
            font-size: 14px;
        }

        .img_cont_blocks_cont {
            padding: 18px 20px;
            bottom: 0;
        }

        .image-with-content {
            padding-top: var(--padding-top-mobile);
            padding-bottom: var(--padding-bottom-mobile);
        }
    }
}


@media(min-width:1440px) {
    .image-with-content {
        height: 90vh;
    }

    .image-with-content_main {
        overflow: hidden;
        height: 100%;
    }

    .img_cont_blocks {
        height: 100%;
    }

    .img_cont_blocks_image {
        height: 100%;
    }

    .img_cont_blocks_image img {
        height: 100%;
    }
}