/* MotoGP-Desktop*/
/* Hoja de estilo para el juego de memoria con cartas */

/* Regla con el estilo general para las tarjetas del juego */
/* especificidad: 002 */
main article {
    width: 15vw;
    height: 8em;
    position: relative;
    transform: scale(1);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform .5s;
    box-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,.3);
}

/* Regla con la transformación que permite girar la carta cuando se le pone el data-state al valor flip */
/* especificidad: 012 */
/* especificidad: 012 */
main article[data-state=flip], 
main article[data-state=reveal] {
    transform: rotateY(180deg);
}

/* Regla con la transformación que permite mostrar la parte trasera de la carta cuando se le pone el data-state al valor hide */
/* especificidad: 012 */
main article[data-state=hide] {
    transform: rotateY(0deg);
}

/* Reglas con los estilos generales para el encabezado y la imagen de la carta */
/* especificidad: 002 */
/* especificidad: 002 */
article h3,
article img {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 0.5em;
    /* Advertencia: Color de primer plano heredado de body */
    background: #1C7CCC;
    backface-visibility: hidden;
}

/* Regla para centrar el texto "Memory Card" vertical y horizontalmente en cada carta */
/* especificidad: 002 */
article h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Regla para rotar las imágenes y que se vean correctamente cuando se giran las cartas */
/* especificidad: 002 */
article img {
    transform: rotateY(180deg);
    /* Advertencia: redefinición de la propiedad border-radius */
    border-radius: 0.5em;
}

@media (min-width: 320px) and (max-width: 768px) {
    main article {
        /* Advertencia: redefinición de la propiedad width */
        width: 40vw;
        /* Advertencia: redefinición de la propiedad height */
        height: 16em;
    }
}