Refactor: Rhombus CSS classes

[machikoyasuda]

closes #375

This PR is taking a single commit from #364 and teasing out what refactor can be done to the current code, to help #364 and #354 code be cleaner. There are many more custom rhombuses coming up in this current project, and the production code was using the same ID across multiple rhombuses and getting away with it because they were on different pages. This got messy.

This PR:

• Establishes a naming convention for these classes/IDs: clipped-X and path-X, with an optional -start and -end suffix for rhombuses that appear in a row as a pair (like the Contact section and future Stats sections)
• Changes Class and ID names - but nothing else. No design should change.
• Ensures there are no class or ID name collisions

How to test:

• Ensure there are no visual regressions on home page (initiatives, contact), press and resources for both desktop and mobile

🟢🟢 Once this PR is reviewed, this PR can be deployed to Production 🟢🟢

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	2bf3734
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/66a167d3297d8c00085c14de
😎 Deploy Preview	https://deploy-preview-376--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thekaveman]

No visual regressions observed.