/*VARIABLES*/
:root {
    --gridHeight: 120px;
    --gridWidht: 100px;
}

/*MODAL INICIAL */
.modal-content {
    width: 95%;
}

/* GRID */
.wrapper {
    padding: 2%;
    column-gap: 3px;
    row-gap: 10px;
}

.carta input[type='image'] {
    width: var(--gridWidht);
    height: var(--gridHeight);
}

.mostrar {
    transform: rotateY(180deg) scale(1.12);
    -ms-transform: rotateY(180deg) scale(1.12); /* IE 9  */
    -moz-transform: rotateY(180deg) scale(1.12); /* Firefox */
    -webkit-transform: rotateY(180deg) scale(1.12); /* Safari and Chrome */
    -o-transform: rotateY(180deg) scale(1.12); /* Opera */
}

.mostrar.acertada {
    transform: rotateY(180deg) scale(1);
    -ms-transform: rotateY(180deg) scale(1); /* IE 9  */
    -moz-transform: rotateY(180deg) scale(1); /* Firefox */
    -webkit-transform: rotateY(180deg) scale(1); /* Safari and Chrome */
    -o-transform: rotateY(180deg) scale(1); /* Opera */
}

/*BOTONES*/
.btn {
    padding: 12px 14px;
    font-size: 0.9rem;
}

.btn:hover, .btn.cancel:hover, .btn.neutral:hover {
    padding: 12px 14px;
}