fixes

src/card.tsx

@@ -20,7 +20,7 @@ import IconPlayFilled from './generated/mistica-icons/icon-play-filled';
 import {combineRefs} from './utils/common';
 import Spinner from './spinner';
 import Video from './video';
-import {ThemeVariant, useIsInverseOrOverMediaVariant, useThemeVariant} from './theme-variant-context';
+import {ThemeVariant, useIsInverseVariant, useThemeVariant} from './theme-variant-context';
 import classNames from 'classnames';
 import Inline from './inline';
 import {getPrefixedDataAttributes} from './utils/dom';
@@ -1261,7 +1261,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
             actions = videoAction ? [videoAction] : [];
         }
 
-        const isExternalInverse = useIsInverseOrOverMediaVariant();
+        const isExternalInverse = useIsInverseVariant();
         const withGradient = hasImage || hasVideo;
         const textShadow = withGradient ? '0 0 16px rgba(0,0,0,0.4)' : undefined;
         const hasTopActions = actions?.length || onClose;
@@ -1543,7 +1543,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             actions = videoAction ? [videoAction] : [];
         }
 
-        const isExternalInverse = useIsInverseOrOverMediaVariant();
+        const isExternalInverse = useIsInverseVariant();
         const withGradient = hasImage || hasVideo;
         const textShadow = withGradient ? '0 0 16px rgba(0,0,0,0.4)' : undefined;
         const hasTopActions = actions?.length || onClose;

src/cover-hero.tsx

@@ -170,7 +170,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                     })}
                 >
                     {hasMedia ? <CoverHeroMedia {...mediaProps} /> : null}
-                    <ResponsiveLayout variant={hasMedia ? 'inverse' : variant} backgroundColor="none">
+                    <ResponsiveLayout variant={hasMedia ? 'overMedia' : variant}>
                         <Box paddingY={noPaddingY ? 0 : {desktop: 56, tablet: 56, mobile: 24}}>
                             <Stack space={24}>
                                 {centered && !sideExtra ? (

src/image.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import {SkeletonAnimation} from './skeletons';
 import {AspectRatioContainer} from './utils/aspect-ratio-support';
 import {getPrefixedDataAttributes} from './utils/dom';
-import {useIsInverseOrOverMediaVariant} from './theme-variant-context';
+import {useIsInverseVariant} from './theme-variant-context';
 import {useAriaId, useTheme} from './hooks';
 import {VIVO_SKIN, VIVO_NEW_SKIN} from './skins/constants';
 import {sprinkles} from './sprinkles.css';
@@ -42,7 +42,7 @@ type ImageErrorProps = {
 
 export const ImageError = React.forwardRef<HTMLDivElement, ImageErrorProps>(
     ({borderRadius, withIcon = true, border, className}, ref) => {
-        const isInverse = useIsInverseOrOverMediaVariant();
+        const isInverse = useIsInverseVariant();
         const {skinName} = useTheme();
         return (
             <div

src/responsive-layout.css.ts

@@ -127,7 +127,7 @@ export const forcedMarginMobileContainer = style({
 
 export const backgroundVariant = {
     inverse: sprinkles({background: skinVars.colors.backgroundBrand}),
-    overMedia: sprinkles({background: skinVars.colors.backgroundBrand}),
+    overMedia: sprinkles({background: 'transparent'}),
     alternative: sprinkles({background: skinVars.colors.backgroundAlternative}),
 };