.card-banner-title, .card-title {
    min-height: 20px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    z-index: 10;
    transition: margin-bottom .3s;
    position: absolute;
}
.card-banner-subtitle, .card-subtitle {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0;
}
.card {
    background: var(--primary)!important;
}
.card-game {
    overflow: hidden;
    border-radius: 10px;
    height: 16rem;
    border: 2px solid #000;
}
.card-banner {
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #81e3ff;
}
@media (max-width:770px) {
    .card-banner-title, .card-title {
        font-size: 11px!important;
        display: block;
    }
    .card-game {
        height: 11rem;
    }
    .card-title {
        text-align: left;
        margin-top: -42px!important;
        min-height: 20px;
    }
    .card-banner-subtitle {
        font-size: 9px!important;
    }
}
.bg-cardgame {
    background-size: cover!important;
    background-position: center!important;
}
.card {
    opacity: .95;
    border: 3px solid #ffffff00;
    background: 0 0!important;
}
.card-banner:hover .gradient-bg-card, .card-game:hover .gradient-bg-card, .gradient-bg-card {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
    bottom: 0;
    left: 0;
    right: 0;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.card:hover {
    opacity: .95;
    border: 2px solid #81e3ff;
    border-radius: 10px;
}
.card-title {
    text-align: left;
    font-size: 12px;
    display: flex;
    margin-bottom: -52px;
    right: 0;
    left: 0;
    bottom: 0;
}
.card-banner-title {
    text-align: left;
    font-size: 18px;
    display: flex;
    margin-bottom: -70px;
    right: 0;
    left: 0;
    bottom: 0;
}
.card-title-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 600;
}
.card-banner-title-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-weight: 600;
}
.card-subtitle {
    font-weight: 400;
    font-size: 9px;
    color: #fff;
    display: block;
}
.card-banner-subtitle {
    font-weight: 450;
    font-size: 12px;
    color: #000;
    display: block;
}
.gradient-bg-card {
    --tw-gradient-from: #08053300;
    --tw-gradient-to: rgba(36,  52,  75,  0);
}
.game-img .banner-img {
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    margin: auto;
    display: block;
    width: 0;
    height: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
}
.card:hover .card-title {
    display: flex;
    margin-bottom: 0;
    margin-top: -52px;
}
.card:hover .card-banner-title {
    display: flex;
    margin-bottom: 0;
    margin-top: -62px;
}
.card-game:hover .gradient-bg-card {
    --tw-gradient-from: #070224f5;
    --tw-gradient-to: rgba(31,  41,  55,  0);
    border: 2px solid #272727;
    border-radius: 8px;
}
.card-banner:hover .gradient-bg-card {
    --tw-gradient-from: #81E3FF;
    --tw-gradient-to: rgba(31,  52,  55,  0);
    border: 2px solid var(--primary);
    border-radius: 8px;
}