Accessible solution for clickable media objects

[tylersticka]

On our new case studies page, we have media objects with links in them:

There are similar patterns a little further down the page:

In our prototype, only the heading text was clickable, so each of these was represented by one link.

But during development, multiple members of our team kept trying to click the book covers. So the decision was to put a second link around the book covers.

But then there were duplicate links for each of these items that would show up in the rotor. A short-term decision was made to add aria-hidden="true" to the duplicate links. But it turns out this doesn't prevent them from being focusable, which has led to some errors flagged during testing: https://web.dev/aria-hidden-focus/?utm_source=lighthouse&utm_medium=devtools

By comparison, our Event Summary component and our Card component both use a pseudo element solution to make one link encompass the whole element.

Since we've kicked the can on this solution twice already and issues are still arising, we should come up with a more accessible approach for this instead of continuing to adopt partial fixes.