[BUG] Clickable kirby-card flickers in Safari when used with column-count

[KemalPajevic]

• [X] I have written a good issue

Describe the bug

The issue manifests itself in several ways:

1. The first card in second column breaks between first and second column (see attached screenshot with blue frame that comes when tabbing on the screen).
2. If there is no room to show the whole content (i.e. there is a scrollbar), the first card in second column flickers when mouse hovers over it and over other cards (see attached video from Stackblitz).
3. When the card flickers it is shortly visible in the bottom of the first column (see attached video from Relationsbanken). So it seems to momentarily get a wrong placement.
4. Sometimes the first card in the second column disappears completely (see attached video from Relationsbanken).

Describe how to reproduce the bug

1. Add 4 kirby-cards.
2. Place them in two columns by using column-count: 2;
3. Make them clickable by adding a click event.
4. Decrease the height of the screen until a scrollbar appears.
5. See error described above.

The bug can also be seen in StackBlitz.

Which Kirby version was used?

8.3, 8.7 and 9.0

What was the expected behavior?

All cards have normal hover, don't flicker or disappear, don't break between columns, and respect the columns flow.

Add any screenshots

https://github.com/kirbydesign/designsystem/assets/9060580/8e488949-b6f1-4adf-a0e5-75d5f13f17bb

https://github.com/kirbydesign/designsystem/assets/9060580/fbaa6712-adad-4b72-b8be-95304831534f

Please complete the following information:

• OS: MacOS
• Browser: Safari
• Browser version: 16.6

[jakobe]

This is not a bug in kirby-card, but in the css for the container. The column-count css property should be used for text/paragraphs, that need to wrap into several columns, when the content exceeds the height of the container, i.e. in (printed) page layouts. See: https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

The issue can be solved by using the following css instead:

display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;