diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 40b5e8abe..1d7678662 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -155,6 +155,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 .meta {
   position: absolute;
   bottom: 0;
+  z-index: 1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 0e91aadb7..f88bd2fd1 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -79,13 +79,13 @@ function Card({
       aria-label={t('play_item', { title })}
     >
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
+        {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
         {!loading && (
           <div className={styles.meta}>
             {featured && !disabled && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
             {renderTag()}
           </div>
         )}
-        {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
         {progress ? (
           <div className={styles.progressContainer}>
             <div className={styles.progressBar} style={{ width: `${Math.round(progress * 100)}%` }} />
diff --git a/stylelint.config.js b/stylelint.config.js
index e209fdf3d..46e5d88c8 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -305,7 +305,7 @@ module.exports = (function() {
       'selector-pseudo-element-colon-notation': 'double',
 
       // PostCSS takes care of automatic vendor prefixing (not implemented currently)
-      'property-no-vendor-prefix': false,
+      'property-no-vendor-prefix': null,
 
       // No units are needed for zero
       'length-zero-no-unit': true,