body {
    --size: 14vh;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    place-items: center;
    margin: 0;
    height: 100vh;
    gap: calc(var(--size) / 7);
    align-content: center;
    width: min-content;
    margin: auto;
}

.diamond {
    --suit: url(images/diamond.svg);
    color: red;
}

.heart {
    --suit: url(images/heart.svg);
    color: red;
}

.club {
    --suit: url(images/club.svg);
}

.spade {
    --suit: url(images/spade.svg);
}

.six {
    --rank: "6";
}

.seven {
    --rank: "7";
}

.eight {
    --rank: "8";
}

.nine {
    --rank: "9";
}

.ten {
    --rank: "10";
}

.jack {
    --rank: "J";
}

.queen {
    --rank: "Q";
}

.king {
    --rank: "K";
}

.ace {
    --rank: "A";
}

.card {
    width: var(--size);
    height: calc(var(--size) * 1.5);
    perspective: 1000px;
    flex-shrink: 0;

    .inner {
        border-radius: calc(var(--size) / 20);
        box-shadow: 0 0 calc(var(--size) / 20) black;
        width: 100%;
        height: 100%;
        position: relative;
        transition: transform 0.8s;
        transform-style: preserve-3d;

        :not(:hover)>& {
            transform: rotateY(180deg);
        }

        .front,
        .back {
            border-radius: calc(var(--size) / 20);
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .front {
            background-image: var(--suit);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 40%;
            background-color: white;

            &::before,
            &::after {
                position: absolute;
                content: var(--rank);
                background-image: var(--suit);
                background-repeat: no-repeat;
                background-size: 15%;
                background-position: 0 calc(var(--size) / 5);
                display: block;
                inset: 5%;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                font-size: calc(var(--size) / 6);
                padding-left: calc(var(--size) / 50);
            }

            &::after {
                rotate: 180deg;
            }
        }

        .back {
            background-image: url(images/back.jpg);
            background-size: cover;
            transform: rotateY(180deg);
        }
    }
}

@keyframes auto-flip {
    0%, 100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
}

.card:nth-child(2n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 1.5s;
}

.card:nth-child(3n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 2.1s;
}

.card:nth-child(5n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 0.8s;
}

.card:nth-child(7n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 2.9s;
}

.card:nth-child(11n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 0.4s;
}

.card:nth-child(13n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 1.2s;
}

.card:nth-child(17n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 2.5s;
}

.card:nth-child(19n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 0.9s;
}

.card:nth-child(23n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 1.8s;
}

.card:nth-child(29n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 2.7s;
}
.card:nth-child(33n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 3.6s;
}

.card:nth-child(36n) .inner {
    animation: auto-flip 4s infinite ease-in-out;
    animation-delay: 4.5s;
}