.games-container {
    background-color: var(--color-light);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin-bottom:20px;
}

.game-header {
    padding-top: 20px;
    margin-bottom: 15px;
    font-size: 42px;
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

.game-header-highlight {
    color: var(--highlight-color);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.game-header-normal {
    color: var(--text-color);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}


.games-container-layout {
    padding: 0;
    margin: 16px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for small/medium screens */
    width: 100%;
}

.game-box {
    position: relative;
    box-sizing: border-box;
}

.game-box-small {
    padding:2px;
    grid-column: span 1; /* Takes 1 column */
    aspect-ratio: 35/42; /* 1:2 aspect ratio (width:height) */
}

.game-box-big {
    padding: 2px;
    grid-column: span 2; /* Takes 2 columns (full width) */
    aspect-ratio: 36/21; /* 1:1 aspect ratio (square) */
}

/* Extra large screens and smaller (below 1200px) - 4 columns */
@media (min-width: 768px) and (max-width: 1199px) {
    .games-container-layout {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
    }
    
    .game-box-small {
        grid-column: span 1; /* Takes 1 column (1/4) */
    }
    
    .game-box-big {
        grid-column: span 2; /* Takes 2 columns (2/4 = 1/2) */
    }
}

/* XXL screens (1200px and above) - 6 columns */
@media (min-width: 1200px) {
    .games-container-layout {
        grid-template-columns: repeat(6, 1fr); /* 6 columns */
    }
    
    .game-box-small {
        grid-column: span 1; /* Takes 1 column (1/6) */
    }
    
    .game-box-big {
        grid-column: span 2; /* Takes 2 columns (2/6 = 1/3) */
    }
}