The idea
Everything at once. The card is a container whose badge resizes with the card's own width, and whose layout flips between a column and a row as the viewport crosses a breakpoint. Match the badge and the body at both stage widths.
Validated at 420px and 700px: the @media rule flips the layout and the @container rule resizes the badge — a hardcoded value cannot pass both widths.