fix(notecard): misaligned icon, excessive internal padding

[LeoMcA]

Summary

Problem

• Notecard icon is misaligned with text
• On https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#preload there's excessive padding within the notecard

Solution

• Align icon with text
• Override .main-page-content and dd styles (long term we need a better solution for this, it's frustrating to have to override styles, perhaps something like the notecard should live in the shadow dom?)

---

Screenshots

Before

After

---

How did you test this change?

yarn dev, clicked around a few pages

[AnujaRajput727]

Looks ok