/* rpg-style card */
.card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 250px 80px;
    grid-template-areas: "image" "text" "stats";
    margin: 0 1em;
    border-radius: 3px;
    background-color: plum;
    box-shadow: 
		0 2px 5px rgba(0, 0, 0, 0.3),
	  	0 15px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
}

.card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

/* .card-image {
    grid-area: image;
} */
.card-text {
    grid-area: text;
}
.card-stats {
    grid-area: stats; 
}

.card-image {
    grid-area: image;
    background: url("../images/008lg.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-size: cover;
}

.card-text {
    grid-area: text;
    margin: 12px 25px;
}
.card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
}
.card-text p {
    color: #333;
    /* font-size:15px; */
    font-weight: 400;
}
.card-text h2 {
    color: #333;
    margin-top:0;
    font-size: 2.0em;
}

.card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background:
        linear-gradient(to bottom right, rgba(128, 0, 128,0.651), rgba(57, 27, 112,0.37) 70.71%) fixed,
        linear-gradient(217deg, rgba(174, 0, 255, 0.651), rgba(255,0,0,0.57) 79.71%) fixed,
        linear-gradient(127deg, rgba(0, 102, 0, 0.8), rgba(0,255,0,0.57) 70.71%) fixed,
        linear-gradient(336deg, rgba(77, 0, 150, 0.8), rgba(0,0,255,0.51) 79.71%) fixed;    
}

.card-stats .stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #f3f3f3;
    padding:10px;
}