.fortune-shell {
    display: grid;
    gap: var(--space-4);
    place-items: center;
}

.fortune-card {
    cursor: pointer;
    perspective: 1200px;
    width: min(100%, 340px);
}

.fortune-card-inner {
    min-height: 220px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 700ms ease;
}

.fortune-card.is-open .fortune-card-inner {
    transform: rotateY(180deg);
}

.fortune-face {
    backface-visibility: hidden;
    background: var(--surface-strong);
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    display: grid;
    min-height: 220px;
    padding: var(--space-4);
    place-items: center;
    position: absolute;
    text-align: center;
    width: 100%;
}

.fortune-face.back {
    transform: rotateY(180deg);
}

.fortune-text {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.4;
}