[bug] `<rh-audio-player>` mini player scaling

[ocean-rh]

Describe the bug

The mini size player doesn't scale within a column. It scales to 100% of a column on a large screen but then stays at that size as the screen is made smaller. So it breaks the column it's in.

Which Component?

### Steps to reproduce 1. Use 2. Place in 6-column layout 3. Adjust screen ### Expected behaviour The player should stay contained in the parent element ### Screenshots _No response_ ### Element HTML _No response_ ### Operating System (OS) macOS ### Browser Chrome ### More browser information _No response_ ### Additional Info _No response_

[bennypowers]

@ocean-rh do you have an example page that illustrates the problem?

can you fill out the rest of the issue template, so that we can better serve you?

[ocean-rh]

@bennypowers sorry, I don't have a good example page because I used a custom player instead because it wasn't working for what i need. But you can see how it breaks the columns on Code Comments: https://www.redhat.com/en/code-comments-podcast

[ocean-rh]

Not sure what other info to provide? Let me know what other questions you have. Here's a screenshot of the player extending past the column...

[ocean-rh]

This is the full player but this is also what happens with the mini size player.

[bennypowers]

cc @adamjohnson, cc @ocean-rh

We discussed this in office hours today, and the consensus is to fix it by refactoring to use @container queries instead of media queries - probably a Cubone thing