如何模拟具有重叠元素和溢出的盒子阴影效果：隐藏？

Question

CodePen

相关CSS：

.cards {
    display: flex;
    flex-wrap: no-wrap;
    align-content: center;
    max-width: 50em;
    margin-bottom: 2em;
}

.cardWrapper {
    overflow: hidden;
}

.cardWrapper:last-child,
.cardWrapper:hover {
    overflow: visible;
}

.card {
    width: 30em;
    display: flex;
    flex-direction: column;
    margin: 2em 1em;
    padding-bottom: 2em;
    background-color: $color-neutral95;
    border-radius: 1rem;

    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0 20px 28px rgba(0, 0, 0, 0.57);
    box-shadow: 0 20px 28px rgba(0, 0, 0, 0.45);
}

任何想法：

（a）防止剪辑阴影;或

（b）使用其他CSS属性模拟box-shadow;或

（c）采用完全不同的方法来解决这个问题？

我使用的是React，因此更喜欢纯CSS或Javascript解决方案。提前谢谢！