React css modules override child styles

I have a card component that accepts external class and its styles come from card.module.scss

export const Card = ({children, className}: any) => {
    return (
        <div className={classNames(styles.container, className)}>
            {children}
        </div>
    )
}
 //card.module.scss
.container {
    padding: var(--spacer-s);
    background-color: var(--color-primary);
    border-radius: var(--radi-m);
    display: flex;
    height: 150px;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

I want to override height property in another component like this.

//home.tsx
<Card className={styles.card}>
  <CardSecondaryText>example</CardSecondaryText>
</Card>

//home.module.scss
.card {
    height: 214px;
}

But it didn't work. I don't want to use !important word. Any solution for this example will be great. Thanks.