/* assets/Image_Group.css */

.mw_image_group_container {
	/* Enable CSS Grid */
	display: grid;

	/* * Implement responsive grid layout:
	 * auto-fit: allows the grid to fit as many columns as possible.
	 * minmax: sets the column size to be a minimum of 1 fraction unit (1fr) 
	 * and a maximum of the user-defined max width.
	 * This will ensure the image columns are never wider than the max width, 
	 * but will shrink smaller than it if the parent container is too small.
	 */
	grid-template-columns: repeat(auto-fit, var(--mw-img-max-width, 60px));
	align-items: center;
	
	/* Apply the gap size variable */
	gap: 10px;
	
	/* Ensure the container fits its parent */
	width: 100%;
}

.mw_image_group_item {
	/* Image styling */
	width: 100%;
	height: auto; /* Maintain aspect ratio */
	display: block; /* Remove extra space below the image */
	object-fit: cover; /* Optional: ensures images cover the grid area nicely */
}