.pgpro-gallery{
column-count:4;
column-gap:6px;
}

.pgpro-card{
break-inside:avoid;
margin-bottom:6px;
position:relative;
border-radius:20px;
overflow:hidden;
background:#020617;
border:2px solid #000;
display:inline-block;
width:100%;
box-sizing:border-box;
}

.pgpro-image-wrap{
display:block;
position:relative;
line-height:0;
overflow:hidden;
}

.pgpro-card img{
width:100%;
height:auto;
display:block;
transition:transform .45s ease;
}

.pgpro-card:hover img{
transform:scale(1.03);
}

.pgpro-hover{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.5));
opacity:0;
transition:.25s ease;
}

.pgpro-hover span{
color:#fff;
font-size:15px;
font-weight:700;
padding:10px 18px;
border-radius:999px;
background:rgba(0,0,0,.55);
backdrop-filter:blur(8px);
}

.pgpro-card:hover .pgpro-hover{
opacity:1;
}

.pgpro-footer{
padding:8px;
background:#020617;
display:flex;
justify-content:center;
}

.pgpro-copy-btn{
border:none;
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
color:#fff;
font-weight:600;
cursor:pointer;
font-size:13px;
min-width:100px;
}

.pgpro-editor-card{
display:grid;
grid-template-columns:1fr 260px;
gap:20px;
padding:20px;
margin:20px 0;
border:1px solid #ddd;
background:#fff;
}

.pgpro-preview{
width:100%;
border-radius:14px;
display:block;
}

.pgpro-no-preview{
border:2px dashed #ccc;
padding:60px 10px;
text-align:center;
border-radius:12px;
}

@media(max-width:1200px){
.pgpro-gallery{
column-count:3;
}
}

@media(max-width:900px){
.pgpro-gallery{
column-count:2;
}
}

@media(max-width:782px){

.pgpro-gallery{
column-count:1;
}

.pgpro-editor-card{
grid-template-columns:1fr;
}

}