• Be assumption that you need WordPress page represent product or software that user can visit and be impressive. This is design as part of page that shows numbers and how software/product grown up your business.

• When it comes to the design, we will consider which widget suitable for implementation. Let make Section » Row (divide column with ratio 1/2+1/2) and nested Inner Row with ratio (1/3 + 1/3 + 1/3).

Note: You need to setup `background-image` and `min-height` in `Inner Row` element. To imagine what UI looks, take advantage Text Block to edit and view in browser.

Note: You can use `Copy outerHTML` to get sample HTML.

• Replace `Text Block` by using `RawHTML` and the result shown as the same. Hence, carry out of custom HTML to make sure User Interface fit requirement.

In other hand, if you want to take advantage `Text Block`, we can write custom CSS as below to get the same UI.

.box-number-size > .vc_column-inner > .wpb_wrapper {
    background: white;
    box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 10%);
    border-radius: 28px;
}
.box-number-size > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper {
    text-align: center;
}
.box-number-size > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper > p {
    padding-top: 44px;
}


.box-number-size > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper > p > strong {
    font-size: 40px;
    box-sizing: border-box;
    vertical-align: text-bottom;
    font-family: inherit;
}


.box-number-size > .vc_column-inner > .wpb_wrapper > .kleo_text_column > .wpb_wrapper > h3 {
    font-weight: 600;
    font-size: 18px;
    color: #484C4F !important;
    font-family: inherit;
    line-height: 24px;
    margin-top: 4px;
    padding-bottom: 24px;
}

Note: Insert extra class named `box-number-size` in Column Settings element which contains `Text Block` element. If place `Text Block` element outside of `Inner Row` and you can remove `.vc_column-inner` and custom CSS.

To have established column gap between columns, you can column gap in Inner `Inner Row` or `Row` element.

In the other hand, you can use wrap content and style in `.wpb_wrapper`.

• For mobile responsive, you can duplicate element and focus on customize CSS for mobile resolution only.

.mobile-resolution {
    display: none;
}
.desktop-resolution {
    display: block;
}


@media only screen and (max-width: 600px) {
    .mobile-resolution {
        display: block;
    }
    .desktop-resolution {
        display: none;
    }
    // Your Custom CSS
}