::-webkit-scrollbar { display: none; } /* Hide scrollbar for Chrome, Safari, and Opera */
  .scrollbar-hide::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge, and Firefox */


#imageModal {
    animation: fadeIn 0.5s ease;
}

.square-container {
    padding-top: 100%;
}

.modal-image {
    max-width: 100%; /* Ensure the image doesn't exceed the container's width */
    max-height: 90vh; /* Set a maximum height of 80% of the viewport height */
    width: auto; /* Let the width adjust to maintain aspect ratio */
    height: auto; /* Let the height adjust to maintain aspect ratio */
}

.square-container img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Adjust based on your image's aspect ratio */
    background-color: #f0f0f0; /* Light grey placeholder color */
    cursor: pointer;

}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}