.modal-body img {
	width: 100%; /* Ensure the image takes the full width of the modal */
}

.modal-lg {
	--bs-modal-width: 1200px;
}

#modalImage {
	width: 100%;
}

.img-thumbnail {
	cursor: pointer;
}


.thumbs {
	flex-wrap: wrap;
}

.thumb {
    width: 300px;  /* Desired thumbnail width */
    height: 300px; /* Desired thumbnail height */
    overflow: hidden;
    position: relative;
	margin: 10px;
	transition: all 0.4s ease;
    background: #f3f3f3; /* Placeholder background while image loads */
}

.thumb img {
    position: absolute;
    top: 50%;         /* Adjust these values to center the image or show the desired portion */
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;  /* Ensure the image covers the container */
    min-height: 100%; /* Ensure the image covers the container */
    object-fit: cover; /* Cover the container without distortion */
    opacity: 0;
    transition: opacity 0.3s; /* Fade in effect */
}

.thumb:hover {
	transform: scale(1.1);
}

.thumb img.lazyloaded {
    opacity: 1;
}