.games-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); /* Responsive columns */
    gap: 24px;  /* Space between cards (rows and columns) */
    width: 100%; /* Full width of parent container */
    box-sizing: border-box;
}

/* General Card Styling */
.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: auto; /* Ensure the card grows with content */
    font-family: Arial, sans-serif;
    overflow: hidden;
    background-color: #f9f9f9;
    /*margin: 2%;*/
    text-decoration: none;
    color: inherit;
}

/* Card Content */
.card-content {
    padding: 16px;
    flex-grow: 1;           /* This allows the content area to take available space */
    display: flex;
    flex-direction: column;
    max-height: 300px;
    cursor: default;
    justify-content: space-between;
}

/* Image Placeholder */
.card-image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;         /* Fixed height for the placeholder */
    width: 100%;          /* Full width of the container */
    background-color: #ddd; /* Light gray background */
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;      /* Ensure content does not spill out */
}

/* Image Styling */
.card-image {
    max-width: 120%;       /* Image will not exceed the placeholder width */
    max-height: 140%;      /* Image will not exceed the placeholder height */
    object-fit: cover;     /* Ensures the image is cropped proportionally if needed */
    border-radius: 10px;   /* Matches the placeholder's border-radius */
}

/* Title Styling */
.card-title {
    font-size: 2rem;       /* Larger title size */
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}