.card-container { display: grid; grid-template-columns: repeat(auto-fill, 60px); gap: 2px; width: 80vw; }
        .card {
            width: 60px;
            height: 60px;
            perspective: 1000px;
        }
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }
        .card:hover .card-inner {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card-front {
            background-color: #795548; /* Brown color for front */
        }
        .card-back {
            background-color: #ffffff; /* White background for cross */
            transform: rotateY(180deg);
        }
        /* Style for crosses on the back side */
        .cross {
            position: relative;
        }
        .cross::before, .cross::after {
            content: '';
            position: absolute;
            background-color: var(--cross-color);
            border-radius: 2px;
        }
        .cross::before {
            width: var(--cross-thickness);
            height: var(--cross-vertical);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .cross::after {
            width: var(--cross-horizontal);
            height: var(--cross-thickness);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }