.image-row {
    display: flex;
    justify-content: space-around;
}

.image {
    flex: 1; /* This makes each image div take equal space */
    text-align: center; /* This centers the image and caption */
    padding: 10px; /* Adjust as needed for spacing */
}

.image img {
    width: 100%; /* Adjust image width within the div */
    height: auto; /* Maintain aspect ratio */
}


/* Styles for the Modal */
.modal {
	display: none !important; /* This hides the modal initially */
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.9);
	align-items: center; 
	justify-content: center;
	display: flex;
}

 .modal-content {
	margin: auto;
	display: block;
	max-width: 90%; /* Adjust to control image size */
	cursor: zoom-in;
	transition: transform 0.25s ease;
	object-fit: contain; /* This ensures the image is contained within its box */
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

.zoomed {
	transform: scale(2);
	cursor: zoom-out;
	transform-origin: center; /* Ensure zoom centers around the middle of the image */
}