.gallery {
	display: grid;
	/* This creates a responsive grid with minimum column width of 250px */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px; /* Space between images */
	padding: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
/* Individual image container styles */
.image-container {
	position: relative;
	overflow: hidden; /* Clips the zoomed image */
	border-radius: 8px;
	aspect-ratio: 1 / 1; /* Keeps containers as perfect squares */
}
.image-container img {
	width: auto;
	height: auto;
	object-fit: cover; /* Ensures images cover the container well */
	/* Add a smooth transition for the transform property */
	transition: transform 1.3s ease-out;
	display: block;
	box-shadow: 0 8px 8px rgba(0,0,0,0.1);
}
/* Zoom effect on hover */
.zoom-effect:hover img {
	transform: scale(1.2); /* Zooms the image to 120% of its size */
}