[Line Diagram] [Right Rail]: Fare cards

[lvachon1]

Scope

Asana Ticket: 💈➡️Fare cards

Implementation

Added logic to determine which fare card to pull from the CMS and show on the right rail.
Adjusted fare card css to use container queries instead of media queries so that our thin right rail uses the thin layout even on wide screens.
Created non-CMS fare cards for Rapid Transit SL, Ferries, and free busses

Screenshots

Subway Fare Card

Commuter Rail Fare Card

Bus Fare Card

Ferry Fare Card

Silver Line Rapid Transit Fare Card

Free Fare Card

How to test

http://localhost:4001/schedules/Green/line_new - Subway Fare
http://localhost:4001/schedules/71/line_new - Bus Fare
http://localhost:4001/schedules/CR-NewBedford/line_new - Commuter Rail Fare
http://localhost:4001/schedules/Boat-F1/line_new - Ferry Fare
http://localhost:4001/schedules/741/line_new - Silver Line Rapid Transit
http://localhost:4001/schedules/751/line_new - Silver Line Bus
http://localhost:4001/schedules/23/line_new - Free Bus

Confirm that the proper fare card shows up, and that the links work and go to the right pages.
Confirm that the fare cards on those content pages look right.
Confirm that the fare cards on the new line diagram look like the figma
Confirm that the fare cards on mode pages (http://localhost:4001/schedules/bus) look right.

[joshlarson]

The two changes that I'm requesting for this are on complete opposite sides of the concrete <-> abstract spectrum.

---

The concrete, tiny change that is blocking for me is the w-[380px] thing - that's a bit too rigid a hard-coded width for something that can be viewed at a number of different widths.

---

The high-falutin' abstract one is that I don't think we should be reaching out to the CMS for the fare cards (I'm aware that we did land on that as a "best-guess implementation strategy" when scoping this ticket earlier-on, so I'm sorry about the rollercoaster there! 😅). That said, this PR has exposed a few reasons why I'm reconsidering:

• The code is surprisingly convoluted, and necessarily must be. There's no way to statically examine the code and see what fare card will wind up on a given page, or even that a fare card will wind up on a given page.
• This page will now fail to load if the CMS is down and our cache isn't populated.
• There are a number of fare cards that have no entry in the CMS. We'd either have to get content to add fare cards for us that they're likely never going to use, or we'll have to special-case those.
• Most of the fare card content comes from our code anyway - the CMS just tells us to put the full-price fare on the left(top) and the reduced price fare plus the Learn more link on the right(bottom), but the prices and fare media come from Dotcom anyway.
• The fact that we're forced to use @dialyzer {:nowarn_function, fare_card: 1} signals that we're invoking a function (in this case DotcomWeb.PartialView.paragraph/1) in a way that it wasn't meant to be used.