/* Art Gallery Content Styling */
.art-modal-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center; /* Center thumbnails vertically if necessary */
    overflow-y: auto;
    max-height: calc(80vh - 3rem); /* Prevent overflow within the modal */
    width: 100%; 
}


/* Full View Modal Content Styling */
.art-full-modal-content {
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    max-height: 70vh; 
    width: 100%;
}

.art-full-modal-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem; /* Add space below image */
}


/* Art Gallery Thumbnails Styling */
.art-gallery-item {
    width: 150px;
    height: 150px; /* Make thumbnails square and consistent */
    cursor: pointer;
    overflow: hidden; /* Ensure image fits within the thumbnail box */
}

.art-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and fit the thumbnail */
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.art-gallery-item img:hover {
    transform: scale(1.05);
}


/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {

    .art-piece img {
        max-width: 100%; /* Ensure images scale properly on smaller screens */
    }
}