.slds-col a, .slds-col a:link, .slds-col a:hover, .slds-col a:visited {
    display: block;
    text-decoration: none;
}

a.inactive {
    opacity: .5;
    cursor: default;
}

.game-card {
    border-radius: 10px;
    height: 150px;
    width: 150px;
    padding: 10px;
    position: relative;
}

.game-card:after {
    background-color: #000000;
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
    z-index: 1;
}

.game-card[data-bg]:after {
    opacity: .5;
}

.inactive .game-card:after {
    background-color: #cccccc;
}

.inactive .game-card * {
    color: #aaaaaa;
}

a:not(.inactive) .game-card:hover:after {
    background-color: #4ca8de;
}

.game-card_title {
    text-align: center;
    display: inline-block;
    width: 100%;
    font-size: 28px;
    color: #ffffff;
    line-height: 34px;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 6px black;
}

.inactive .game-card_title {
    text-shadow: none;
}

.game-card_coming-soon {
    text-align: center;
    display: inline-block;
    width: 100%;
    color: #000000;
    position: relative;
    z-index: 2;
}

.game-card:before {
    position: absolute;
    content: '';
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    z-index: 0;
}

[data-bg="memory"]:before {
    background-image: url('../images/games/memory.png');
}

[data-bg="colorcode"]:before {
    background-image: url('../images/games/colorcode.png');
}