/*!
 * Custom Styles for Kiem The Offline Web
 */

/* Override grid item to fit icon size smoothly
   Assuming the icons are square or similar, we make sure they don't stretch awkwardly.
   Adjust 'max-width' if the user wants them smaller.
*/


.img-responsive.game-icon {
    margin: 0 auto;
    width: 100%;
    /* Ensure it fills the column width */
    height: 250px;
    /* Fixed height for uniformity */
    object-fit: contain;
    /* Ensure full image is visible */
    background-color: #2c3e50;
    /* Add dark background for letterboxing */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ensure the grid doesn't waste too much space if icons are small */
/* We can use flexbox if we want to center them better in the row, but bootstrap floats work */
#portfolio .portfolio-item {
    margin-bottom: 30px;
}

/* Modal text alignment */
.modal-body ul li {
    text-align: left;
}