There’s a big step up from creating a static widget to making one fully size responsive. The way you have built it at this point, this won’t be easy. Pretty much every place you have specified a static pixel size you would have to modify. The quick way out is just to set a fixed width and height for the card too. That will keep the widget from scaling at all, but will also keep everything inside from changing size.
The best solution for a responsive layout in this case would be to refactor the entire card to use a css grid:
That take a good deal of learning up front but becomes incredibly powerful once you get used to. In this case it would get rid of all of the f7-col you’ve used and greatly simplify the overall construction. I would apply the grid settings to the f7-block and then all your filler components just become direct children of that block with directives that tell them which cell in the grid to populate (and just to fill the entire grid cell because the size is being controlled by the grid definition. The grid can be defined to be entirely relative in size and at that point, when you scale the card everything will scale appropriately.
This site may also be helpful: