Is it possible to substitute different values ​​of variables in less in media queries?

Question

Less

There is this code:

@buttonsWidth: 50px;

.buttonWrapper {
    margin: 0 @buttonsWidth / 2;

    .button {
        width: @buttonsWidth;
    }
}

That is, the margin of the wrapper depends on the width of the button.
Now I want to make it so that when the screen width is less than a certain value (i.e. @media (max-width: 500px) {...}), the width of the button is different, for example 10vw. Is it possible to somehow define a variable in less so that media queries are automatically written in this case. Something like:

@buttonsWidth: 50px;

@media (max-width: 500px) {
    @buttonsWidth: 10vw;
}