Solved Right way to control spacing between columns

I am implementing the layout provided by a designer.
As a part of the designs, I need to set a specific spacing between various columns.
Layouts I'm working on are like this:

[image] 15px [text]
[text] 15px [image]

For some reason, there's no custom margin setting for a Column.
I can set custom Gutter but I can't set it precisely in pixels.

I was trying different ways to solve this:

- Set gutter to 1 (no gutter) and use transform / translateX to move columns left and right 8px to have 16px between them. This works well with max-width for a row to make sure the section width matches the expected value.

- Set a transparent right border of width 16px. Also seems to work out fine so far.

I've also tried to just add custom CSS "margin-right: 15px;" for a Column but that didn't work.

Would appreciate your advice on how to best implement this!

 

This method has its cons:
- You cannot have a border on cards (columns).
- You cannot have round corners (since the internal border-radius cannot be set via CSS explicitly, and by default is is (border-radius - border-width) and in most cases will be zero.

So far I've ended up with either using translateX() or using custom CSS rules to give margins.
I had to use id on each column element to make it work since the theme CSS enforces zero margins.