body {
    font-family: Georgia, serif;
    background: #f7f5f0;
    margin: 0;
    color: #333;
}

.gallery { padding: 30px; }

.artwork {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 40px;
    max-width: 1400px;
    margin: auto;
    align-items: center;
}

.image-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background: #eee;
}

.image-panel img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity .8s ease;
}

.image-panel img.show { opacity: 1; }

.info-panel { padding: 20px; }
h1 { font-size: 2rem; margin-bottom: 20px; }
.metadata { margin-bottom: 20px; line-height: 1.8; }
.description { line-height: 1.7; text-align: justify; }

.navigation { margin-top: 30px; text-align: center; }
button { padding: 10px 18px; font-size: 18px; cursor: pointer; margin: 0 10px; }

/* MINIATURE - Forzate via CSS */
.thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin-top: 30px;
    padding: 10px 0;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.thumbnails img {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px;
    object-fit: cover !important;
    border: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .3s ease;
}

.thumbnails img:hover { transform: scale(1.08); }
.thumbnails img.active { border-color: #333; box-shadow: 0 0 10px rgba(0,0,0,.25); }

@media(max-width: 900px) {
    .artwork { grid-template-columns: 1fr; }
}