Responsive WPBakery Page Customization using CSS

We have a element we are working for a private page which contains 4 columns of information including an image, title and description along with a button in each column.

We are happy with the desktop display, which shows 4 columns evenly spaced, however when we shrink the view down it still shows 4 columns until 767px and then it shows 2 columns on top of 2 columns, but there is no space between the columns vertically or horizontally.

At Around 450px, we would like it to show 1 column on top of 1 column.

We are using WPBakery Pagebuilder with the Ciyashop Theme so you should have good knowledge of Wordpress, WPBakery Page Builder, CSS.

You will need to provide us with hightlight notes of your changes to the CSS by commenting the sections you added and let us know if you have removed any of our existing css.

So we need the following:
1. at 767px it shows 2 columns on top of 2 columns which is good, but you will need to add space between the columns horizontally and vertically. Each column has a background image in it, so margin or padding will not work to accomplish this.
2. At around 450px, we need it to show 1 column on top of 1 column on top of 1 column on top of 1 column with space horizontally between each.