Card Sizing Issue(s) ... Multiple Cards on a Page

There are times I have multiple credit card inputs as you'll see in the screenshot(s) below.
I don't think it's pertinent based on how I'm using card, but this is in an Angular app.
I initialize the card as follows...

```
const cardContainer = '.card-container-'+this.roomIndex;
const ccNumber = 'input#td-cc-number-'+this.roomIndex;
const ccName = 'input#td-cc-first-name-'+this.roomIndex+', input#td-cc-last-name-'+this.roomIndex;
const ccExpiry = 'input#td-cc-expiry-'+this.roomIndex;
const ccCvc = 'input#td-cc-cvc-'+this.roomIndex;

// Initialize Card
$(this.element.nativeElement).card({
// a selector or DOM element for the container
// where you want the card to appear
container: cardContainer, // *required*
width: 250,
formSelectors: {
numberInput: ccNumber, // optional — default input[name="number"]
nameInput: ccName,
expiryInput: ccExpiry, // optional — default input[name="expiry"]
cvcInput: ccCvc // optional — default input[name="cvc"]
},
formatting: true, // optional - default true
// Strings for translation - optional
messages: {
validDate: 'valid\ndate', // optional - default 'valid\nthru'
monthYear: 'mm-yyyy' // optional - default 'month/year'
},
// Default placeholders for rendered fields - optional
placeholders: {
number: '•••• •••• •••• ••••',
name: 'Full Name',
expiry: '••-••••',
cvc: '•••'
},
// if true, will log helpful messages for setting up Card
debug: true // optional - default false
});
```

As you can see there, I have specified the width. This works for the first card in the loop of initializations... Below is the screenshot showing the first one and another one with varying size.


I started trying to specify the size of the card when the cards were not appropriately re-sizing as they do on the demo page. So I could be doing something wrong. I'll show my relevant template code for completeness...

```

For those not familiar with Angular, the `piCreditCard` directive is what actually initializes the card(s).

I have made a "stab" attempt at solving this, but I'm not a CoffeeScript person, and unfortunately I don't have the time at the moment to learn it as well as I would hope. So maybe someone can point me in the right direction, or fix this. It would be greatly appreciated.

The ultimate fix for me would also be knowing how to make it responsive. That would be much more impressive for my client as they would like it larger on the larger screens, but I must be thinking about their users more than themselves.

Thanks!
Jarvis

Start at the piCreditCard directive and the card initialization shown in the issue; inspect how the container width is handled for repeated Angular cards and how the width option is applied. Reproduce the problem with multiple cards, then verify consistent sizing and responsive behavior across the rendered containers.

Written by the indexing model from the issue text.