Apply bootstrap utility classes based on CSS container query

Question

I've built a widget component that responsively changes its internal grid at screen sizes less than 1200px, mainly using bootstrap's utility classes like col-xl-4 and many other *-sm-* and *-xl-* classes. I needed to use some CSS properties not covered by the utility classes, so also have a media query like this to add some extra ones:

// Small screen-specific rules.
@media (max-width: 1199px) {
  .widget-list {
    max-height: 220px;
    overflow-x: scroll;
    flex-direction: column;
    align-content: flex-start;
  }

  .widget-list.filtered {
    max-height: 110px;
  }

  ...
}

Now I need to use the widget in other places where it will be inside a smaller space (less than 900px), even on large screens, so I need all the helper classes and other styles to apply based on container size, not screen size. I can easily change the media query CSS to apply with a container query like this:

// Small space-specific rules.
@container location-chooser (width < 900px) {
    ...
}

...but how can I get the huge amount of CSS coming from the bootstrap utility classes to apply in the less than 900px container without reverse-engineering bootstrap to copy/paste all the styles, or rewriting everything manually? Thanks!