Different gutters per breakpoint

[rumede]

I can use the variable $grid-gutter-width to control the distance between each col. I can change the default value of the variable. But this value then affects all breakpoints (@media).

I now have the following problem:
I would like to change the gutter from 1.5rem to 3.0rem starting at breakpoint “XL” (@media (min-width: 1200px)). All breakpoints below XL should use the default value.

I tried the following:

@media (min-width: 1200px) { 
$grid-gutter-width: 3.0rem;
}

Unfortunately, this does not work.

Can someone tell me how to change such variables only on certain breakpoints? What is the solution approach here?

Thank you very much for your feedback.

Kind regards from Switzerland
Reto

[fynn]

Why not use the built in row options to do that?

[rumede]

@fynn
to work with the Gutter is an idea, so far I was also already. But I don’t want to have to think about adding the Gutter class to every element I build.

I think in the end it will be a wordpress site, and the client will insert a col module. He doesn’t want to have to adapt the class every time.

But thanks for the input I’ll see if I can change the text module in wordpress accordingly.