Adopt spotlight-card class on spotlight cards on Vet Centers and VBA

[laflannery]

Description

An editor add a naked link into one of their spotlights. Because these do not wrap natively, the spotlights did not keep their equal widths and instead one became much larger than the others to accommodate the nakedness. This happened on Greensboro Vet Center and looked like:

Both Eli and Josh reviewed. We originally thought that we would want to update these to use a grid layout. However, Josh added a new class to handled this - see original comment. This has already been done to VAMCs on prod and can be seen here.

We would like to add the spotlight-card class to the card components on both Vet centers and VBA spotlights.

Acceptance Criteria

• spotlight-card class has been added to Vet Center spotlights so that now they always display properly and have equal widths when there are 2 or 3 added
• spotlight-card class has been added to VBA spotlights always so that now they display properly and have equal widths when there are 2 or 3 added (here or separate ticket)
• Requires design review

[aklausmeier]

I have also inquired about naked link error validation in Drupal in Slack.

[eselkin]

This happens on non-naked-links too here, like email addresses (separated not with spaces but   from that preferred)

[eselkin]

Actually found the style="word-break: break-word;" does wrap the naked links. So we don't need to switch to the grid. We can keep the flex.

[aklausmeier]

@eselkin Does the wrap solution keep the 3 columns to equal widths?

[jtmst]

by adding the following class we will be able to maintain equal width and appropriately wrap long links:

.spotlight-card { min-width: 30%; word-wrap: break-word; }

I'll be adding this as part of the health-services PR component migration PR, we will just need to add the class to other instances of the cards if @eselkin agrees that this works

[davidmpickett]

Verified on Prod for Vet Center

Verified on Preview for VBA