* {
    box-sizing: border-box;
}

div.front {
    width: 216px;
    height: 306px;
    background-image: url("images/front.png");
    background-size: 216px 306px;
    display: inline-block;
    position: relative;
}

div.front img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.back {
    width: 216px;
    height: 306px;
    background-image: url("images/back.png");
    background-size: 216px 306px;
    display: inline-block;
}

div.back img {
    display: none;
}

div#cont {
    transform: translate(-7.5%, -7.5%) scale(0.85);
    width: 118%
}

.card {
    background-color: beige; 
    width: 15em;
    text-align: center;
    box-shadow: 0.3rem 0.3rem 1rem #00000080;
    border-radius: 1em;
    border: 0.2rem solid #000c;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 1s;
    filter: grayscale(0.5);
    padding: 1rem;
    filter: grayscale(0.5);
}

.card:hover {
    border: 0.2rem solid #000f;
    background-color: bisque;
    box-shadow: 0.3rem 0.3rem 1rem #000000d0;
    filter: grayscale(0);
}

.card a:only-child {
    display: block; 
    text-decoration: none; 
    color: black; 
    width: 100%; 
    height: 100%;
}

h1 {
    margin: 2rem;
}
h2 {
    margin: 0;
}

@media only screen and (max-width: 500px) {
    div#cont {
        transform: translate(-30%, -30%) scale(0.4);
        width: 250%;
    }
}

@media only screen and (max-width: 380px) {
    div#cont {
        transform: translate(-32%, -32%) scale(0.34);
        width: 300%;
    }
}