
/* Apresentação de .portfolio-gallery */
.portfolio-gallery {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start
}

/* Apresentação de .portfolio-piece */
.portfolio-piece {
display:block;background:#141414;border-radius:8px;overflow:hidden
}

/* Apresentação de .portfolio-piece img */
.portfolio-piece img {
display:block;width:100%;height:auto;max-height:850px;object-fit:contain
}

/* Apresentação de .art-dialog */
.art-dialog {
width:min(1200px,96vw);max-height:95dvh;background:#111;color:#fff;border:0;padding:16px
}

/* Apresentação de .art-dialog::backdrop */
.art-dialog::backdrop {
background:#000e
}

/* Apresentação de .art-dialog>img */
.art-dialog>img {
display:block;width:100%;height:75dvh;object-fit:contain
}

/* Apresentação de .art-dialog button */
.art-dialog button {
background:#222;color:#fff;border:1px solid #555;border-radius:24px;padding:10px 20px;cursor:pointer
}

/* Apresentação de .art-close */
.art-close {
display:block;margin:0 0 12px auto
}

/* Apresentação de .art-navigation */
.art-navigation {
display:flex;align-items:center;justify-content:center;gap:24px;margin-top:12px
}

/* Apresentação de .art-dialog button:hover */
.art-dialog button:hover {
background:#e6e600;color:#000
}

/* Regra responsiva / animação */
@media(max-width:600px) {

/* Apresentação de .portfolio-gallery */
.portfolio-gallery {
grid-template-columns:1fr;gap:16px
}

/* Apresentação de .art-dialog>img */
.art-dialog>img {
height:65dvh
}

}

/* Apresentação de .portfolio-gallery */
.portfolio-gallery {
display:block;columns:320px 2;column-gap:24px
}

/* Apresentação de .portfolio-piece */
.portfolio-piece {
display:inline-block;width:100%;break-inside:avoid;margin:0 0 24px;vertical-align:top;background:transparent
}

/* Apresentação de .portfolio-piece img */
.portfolio-piece img {
height:auto;max-height:none
}

/* Regra responsiva / animação */
@media(max-width:600px) {

/* Apresentação de .portfolio-gallery */
.portfolio-gallery {
columns:1
}

/* Apresentação de .portfolio-piece */
.portfolio-piece {
margin-bottom:16px
}

}

/* Apresentação de .packaging-page .portfolio-piece,.packaging-page .art-dialog>img */
.packaging-page .portfolio-piece,.packaging-page .art-dialog>img {
background:#fff
}

/* Apresentação de .packaging-gallery */
.packaging-gallery {
columns:1;max-width:1400px;margin:auto
}

/* Apresentação de .packaging-gallery .portfolio-piece */
.packaging-gallery .portfolio-piece {
max-width:100%
}

