Override width for [!multi-column] columns

[Tanjamuse]

Hi,

I know I can add |wide-0 - |wide-5 to my various callouts, but is there a way to override it? I have four columns in total, and I would like two of them to be close to double the width of the two others.

This is how my multi-column looks, and below that is the long snippet that I use

`>[!multi-column]

[!mtg|wide-5]- test

[!mtg]- test

[!mtg] test

[!mtg|wide-5] test`

`.callout[data-callout=mtg] .callout-title {
display: inline-flex;
justify-content: left;
align-items: left;
}

.callout[data-callout=mtg] .callout-title-inner::first-letter {
--callout-title-color: rgba(199,14,83, 1);
--link-color: #E1C16E;
--link-color-hover: #E1C16E;
font-family: "ariel";
font-size: 35px;
text-align: left;
}

.callout[data-callout=mtg] .callout-title-inner {
--callout-title-color: rgba(199,14,83, 1);
--link-color: #E1C16E;
--link-color-hover: #E1C16E;
font-family: "Ariel";
font-size: 35px;
text-align: left;
column-width: 20rem;
}

.callout[data-callout=mtg] .callout-title-inner::after {
content: "";
display: block;
width: 100%;
height: 4px;
background: linear-gradient(to right, var(--custom-prop, #136FC3), transparent);
left: 0;
filter: brightness(1.2);
}

.callout[data-callout="mtg"] {
--callout-color: 225, 193, 110;
--link-color: #E1C16E;
--link-color-hover: #E1C16E;
background-color: transparent;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 20px;
font-family: "Gabriola";
font-size: 24px;
padding-bottom: 0px;
padding-top: 2px;
padding-left: 12px;
padding-right: 2px;
columns: 2;
}

.callout[data-callout="mtg"] .callout-icon {
display: none;
}`

What I would love to do is having an option to make the two middle callout boxes be fit content and then give the "excess" space to the two others.