Card & Thumbs Have Different Background Size Properties

The CSS for the cards and thumbs are diffrrent. This means that what people see in the thumb area isn’t the same as what they will see in cards.

**Card: **

.card__media {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: var(--color-placeholder);
}

Thumb:

.thumbnail-preview {
    height: var(--thumbnail-preview-height);
    width: var(--thumbnail-preview-width);
    border: var(--thumbnail-preview-border);
}

As another option, you could take out the size and width from the thumb and get the correct aspect ratio and contained in the css max height/width set area. However, this is not how it will look as a card unless the card CSS is the same.

.thumbnail-preview {
    height: var(--thumbnail-preview-height);
    /* width: var(--thumbnail-preview-width); */
    /* border: var(--thumbnail-preview-border); */
}

*Took out the border for easier visualisation of this issue.

[tzarebczan]

We do recommend a size and aspect ratio on the publish page.

[kauffj]

I missed this when it was originally filed. Great catch @Invariant-Change, really appreciate your eye for correctness and ability to make contributions like this.