[KCard] Make thumbnail area ratio configurable

[MisRob]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Background

Due to several factors such as the thumbnail area taking 30% of the card's width, its square format, and surplus space on My Channels and other Studio pages, KCard is rendered abnormally large. Furthermore, because Studio encourages and crops/adds transparent space to thumbnail images resulting in a 16:9 ratio, thumbnail images rarely fit into the square format nicely. Finally, due to the transparent space being added, the square format results in gray letterbox-like areas appearing on all sides of some images.

Summary

Update KCard so that it will allow easy configuration of its thumbnail area ratio for use cases when the default behavior is not suitable. This will allow us to achieve:

Proposal

Add a new slot #thumbnail, through which KImg can be inserted (KImg already supports ratio configuration).

<KCard ...>
  <template #thumbnail>
    <KImg
      src="..."
      aspectRatio="16:9"
     isDecorative
     />
  </template>
</KCard>

The presence of the #thumbnail would override thumbnailSrc and thumbnailScaleType. Documentation should be updated to mention the need for isDecorative.

This way, we will not only be able to configure the ratio, but also anything else, should the need arise.