.images {
	max-height: 300px;
	width: 430px;
	border-radius: 10px;
	cursor: pointer; /* Indicate interactivity */
	transition: transform 0.2s ease;
	height: 350px;
}

.images:hover {
	transform: scale(1.05);
}

/* Modal */
.modal {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Black semi-transparent background */
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 10px;
}

@keyframes gradientBG {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 100% 50%;
	}
	100% {
	  background-position: 0% 50%;
	}
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	.images {
		max-height: 200px;
		width: 100%; /* Use full width of container */
		height: auto;
	}

	.modal img {
		max-width: 95%; /* Ensure images fit within small screens */
		max-height: 85%;
	}
}

@media (max-width: 480px) {
	.images {
		max-height: 150px;
		width: 100%;
		height: auto;
	}

	.modal img {
		max-width: 100%; /* Ensure images fully adjust on very small screens */
		max-height: 80%;
	}
}