Media query and page width in Bootstrap based Moodle theme

I'm using the LMS Moodle 4 and the bootstrap based theme boost (github)

By default the page is very narrow on all screens and I'd like to use the bootstrap approach for different screen sizes (.container)

This is what I tried to use in the raw scss field and also the custom css field:

/* Page Width */
@media screen and (max-width: 575px) { $course-content-maxwidth: 100% !default; }
@media screen and (min-width: 576px) and (max-width: 767px) { $course-content-maxwidth: 540px !default; }
@media screen and (min-width: 768px) and (max-width: 991px) { $course-content-maxwidth: 720px !default; }
@media screen and (min-width: 992px) and (max-width: 1199px) { $course-content-maxwidth: 960px !default; }
@media screen and (min-width: 1200px) and (max-width: 1399px) { $course-content-maxwidth: 1140px !default; }
@media screen and (min-width: 1400px) { $course-content-maxwidth: 1320px !default; }

When I only use

$course-content-maxwidth: 100% !default;

or

$course-content-maxwidth: 1320px !default;

it does work but not the combination with media queries above.

Any idea how I could get it to work?

Nevermind, I used the variable wrong. When I use classes it works:

/* Page Width */
@media screen and (min-width: 576px) and (max-width: 767px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 540px; }}
@media screen and (min-width: 768px) and (max-width: 991px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 720px; } }
@media screen and (min-width: 992px) and (max-width: 1199px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 960px; } }
@media screen and (min-width: 1200px) and (max-width: 1399px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1140px; } }
@media screen and (min-width: 1400px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1320px; } }