.featured-games-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
margin: 40px 0;
} .game-spotlight-card {
position: relative;
display: block;
height: 380px;
background-color: #050505; border: 1px solid #111111;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.game-spotlight-card:hover {
border-color: #FF1E1E;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 30, 30, 0.15);
} .game-spotlight-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: top left; background-repeat: no-repeat;
opacity: 0.45; transition: opacity 0.3s ease, transform 0.5s ease;
}
.game-spotlight-card:hover .game-spotlight-bg {
opacity: 0.7;
transform: scale(1.03); } .game-spotlight-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%; background: linear-gradient(to top, #050505 0%, rgba(5, 5, 5, 0.8) 40%, rgba(5, 5, 5, 0) 100%);
z-index: 1;
} .game-spotlight-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 25px 30px;
z-index: 2;
box-sizing: border-box;
} .game-spotlight-title {
color: #FF1E1E !important; font-family: 'Archivo Black', sans-serif, system-ui;
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 900;
text-transform: uppercase;
margin: 0 0 6px 0 !important;
line-height: 1.1;
letter-spacing: -0.5px;
word-break: break-word;
} .game-spotlight-tags {
color: #b9b9b9 !important; font-family: sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 !important;
} @media (max-width: 900px) {
.featured-games-container {
grid-template-columns: 1fr; gap: 15px;
}
.game-spotlight-card {
height: 300px; }
.game-spotlight-info {
padding: 20px;
}
}