/**
 * @description games page styling sheet
 * @requires tailwind for base utils
*/

/* game grid item */
.game-item {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    background: #0a0a0a;
}

.game-item:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.6),
        0 0 35px -10px var(--accent-color);
}

/* game image */
.game-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* game title overlay */
.game-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.7) 60%, transparent);
    padding: 3rem 1rem 1rem;
}

/* fix mobile */
@media (max-width: 640px) {
    .game-item {
        aspect-ratio: 16/9;
    }

    .game-title {
        padding: 2rem 0.875rem 0.875rem;
    }
}