#vlightbox1 {
	width: 100%;
	display: flex; 
	flex-wrap: wrap; /* Allows photos to wrap to new lines */
	gap: 10px; /* Consistent spacing between all photos */
	padding: 10px;
	box-sizing: border-box;
}

#vlightbox1 .vlightbox1 {
	display: block; 
	position: relative;
	font-family: Trebuchet, Tahoma, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	opacity: 0.87;
	outline: none;
	transition: opacity 0.2s ease-in-out;

	/* 
	  The Magic Combination:
	  1. 'flex-grow' lets the box expand to fill the row.
	  2. We set a baseline height (e.g., 200px) so the browser has a starting point.
	*/
	flex-grow: 1;
	height: 200px; 
}

/* This final row trick ensures the last row doesn't stretch awkwardly if it has fewer photos */
#vlightbox1::after {
	content: "";
	flex-grow: 99999; /* Prevents the last row from stretching across the screen */
}

#vlightbox1 .vlightbox1:hover {
	opacity: 1;
}

#vlightbox1 .vlightbox1 img {
	display: block;
	border: none;
	margin: 0;

	/* Forces the image to perfectly fill the flexible container without losing aspect ratio */
	width: 100%;
	height: 100%;
	object-fit: cover; 
}

/* Kept from your original layout */
#vlightbox1 .vlightbox1 div { 
	display: none; 
}