Fix: Fix Desktop rhombus bug on Safari

[machikoyasuda]

closes #174 fully

• Used https://yoksel.github.io/relative-clip-path/ to create clip-paths directly from svg's from Figma. Tried using https://www.plantcss.com/css-clip-path-generator but the shapes were not coming out the same.
• Avoid use of filter: url entirely, b/c it's very buggy on Safari.
• Creates an includes for the Press and Resources SVG, as they use the same one.
• Adds SVGs in-line for all 3 Index page SVGs.
• Adds back box-shadow (using filter) on the bottom 2 rhombuses on Home page (https://css-tricks.com/using-box-shadows-and-clip-path-together/)
• This PR also fixes: the second point on Updating spacing for homepage Contact rhombuses #178

How to test

• Apple/Mac OS: test on Safari, Firefox, Chrome for rhombus fixes
• Windows: test on Firefox, Chrome for no regressions
• Android: test on Chrome for no regressions
• iPhone: test on Safari for no regressions

Before & After

Safari behaves very strangely with `filter: url()` -- the browser is trying to apply the filter to _everything_, from the link hover effect, to even the way the user highlights the text. There is no way to apply the filter to just one element in Safari, the browser will apply it to every child element and even highlighted text. And there's no way to add another filter to undo a url filter.

Before	After
Totally bonkers.	Normal.

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	d98fdd7
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/6489fc54a8d95600088516e7
😎 Deploy Preview	https://deploy-preview-188--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 settings.

[thekaveman]

@segacy1 when you have some time, can you please review this follow-up to the split rhombuses in Mac/Safari -- this time for Desktop widths. (And please ensure no regressions in Mobile as well).

[thekaveman]

Regressions on homepage Contact rhombuses, in Windows/Desktop Firefox and Chrome:

• Bottoms are no longer aligned (seems to only happen in "Tablet" sizes, e.g. less than full-screen but larger than mobile)
• The direction changed and no longer represents the Figma design

Figma

Staging

Bottom of each rhombus is aligned, direction "towards" each other as shown in Figma:

This PR

Bottom of the left rhombus is lower than the bottom of the right rhombus, direction "away" from each other:

[machikoyasuda]

Fixes pushed:

• Switches the shapes around
• Uses flex-box to manage / keep the heights the same
• Adds back shadow

Safari:

Firefox:

[thekaveman]

Looks great! Confirmed the fix in Desktop Firefox/Chrome on Windows.

Also, thank you for removing that inline style definition 😁