Change Bootstrap Offcanvas Size (via CSS) (Bootstrap 5.2) - bootstrap-5

Question

I would like to change the size of some bootstrap offcanvas elements. (not all!)
(To change all, I know I can change the SASS-Varianble ($offcanvas-horizontal-width: 400px))
I would like to make this work in a way that I have different CSS classes that I can add to the offcanvas (like the modal with .modal-xl).
I.e. here e.g. .offcanvas-size-l and .offcanvas-size-xl
Of course, the offcanvas should also remain responsive (i.e. not go beyond 100vw for narrower screens. (i.e. with max-width / media-query).
Unfortunately, this is not feasible only simply with a width specification, because bootstrap work in addition to width with corrosponding negative margin which push the offcanvas "out of screen" I.e. that are several values that must be adjusted.
Since I "compile" bootstrap itself via Sass, I have a more Options and can insert before and after the (s)css any parts/SASS functions. (or edit bootstrap source)
Has anyone been able to make this work?
I don't need the "responsive-offcanvas" function (offcanvas-xl) which is new in 5.2 /an does something complete different.
Example code (Directly from the bootstrap page, only "offcanvas-size-xl" added)
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>

Answer 1

In the end it was easier than I thought, there is also a CSS variable that you can influence (mit SASS):
.offcanvas-size-xl {
--#{$prefix}offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--#{$prefix}offcanvas-width: min(95vw, 250px) !important;
}
For those who do not compile bootstrap, they should be able to do so:
.offcanvas-size-xl {
--bs-offcanvas-width: min(95vw, 600px) !important;
}
.offcanvas-size-xxl {
--bs-offcanvas-width: min(95vw, 90vw) !important;
}
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
--bs-offcanvas-width: min(95vw, 400px) !important;
}
.offcanvas-size-sm {
--bs-offcanvas-width: min(95vw, 250px) !important;
}