Как я могу сделать так, чтобы перекрывающиеся гибкие элементы оставались центрированными как группа? ⇐ Html

[Anonymous]

Я пытаюсь создать эффект карточной комбинации, при котором карты накладываются друг на друга, подобно тому, как карты выглядят, когда вы держите их в руках.
Я использую гибкий контейнер, чтобы центрировать карты по горизонтали. Однако, когда я использую отрицательные поля, чтобы они перекрывались, группа перестает правильно центрироваться, и карточки смещаются вправо, а не остаются по центру.
Вот минимальный пример: https://jsfiddle.net/eg9pfch3/
отрицательный разрыв не приводит к их перекрытию.
Чего я хочу

• Карточки должны перекрываться
  />
• Вся перекрывающаяся группа должна оставаться точно по центру контейнера.

Код: Выделить всё

[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]
[img]https://andrewthamcc.github.io/blackjack2.0/assets/facedown.png[/img]

Код: Выделить всё

html, body {
height: 100%;
background-color: #000;
}

.container {
width: 300px;
height: 150px;
border: 2px solid white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* gap: -40px; */ /* gap does not work for some reason!*/
}

.card {
height: 100px;
width: 65px;
margin-right: -50px;
}

Подробнее здесь: https://stackoverflow.com/questions/798 ... as-a-group