fix(card): only style figure if direct child of .card-body

[pdanpdan]

Initial approach, to be refined after further discussion (only style figure direct child of .card):

It looks like in card we apply styles to all figure inside, but all examples are with the images as direct child of card (and it woul make sense).

So I would say we should scope the style applied in card only to direct children of card.

https://play.tailwindcss.com/nZVaZs1bUq?file=css (has the example with the problem in #4416 and also all cards with image from docs)

What I am unsure about is the below, where my logic would say that p should also be only direct child of card-body (> :where(p)), but I am afraid that there are people that rely on the current behavior.

card-body {
  @layer daisyui.l1.l2.l3 {
    @apply flex flex-auto flex-col gap-2;
    padding: var(--card-p, 1.5rem);
    font-size: var(--card-fs, 0.875rem);

    :where(p) {
      @apply grow;
    }
  }
}

close #4416

[pdanpdan]

Another approach would be to not style figure if it's a child of .card-body, but I would say it would make all very complex and error-prone.

[saadeghi]

What if we change the layer of diff to l2 and add align-items: normal?

https://play.tailwindcss.com/kiVnSotjoF?file=css

[pdanpdan]

If the concern is only for diff in card then sure, it is a solution.
I was more concerned on the too broad selectors for figure.

I'm not sure if it is a good pattern to embed a card in a card, but something like this can happen: https://play.tailwindcss.com/nlNdv47z2d

[saadeghi]

Right. Your solution is better for other situations as well 👍
Will be merged this week

[pdanpdan]

We should decide on the parent-child relationship for p - see first post