.pg-wrap{
width:100%;
/* max-width:380px; */
background:#f6f6f6;
padding:10px;
border-radius:10px;
border:1px solid #ddd;
}

/* MAIN */

.pg-main{
height:330px;
background:#ececec;
border-radius:8px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
border:1px solid #d9d9d9;
}

.pg-main img{
width:100%;
height:100%;
object-fit:contain;
}


/* MAIN ARROW */

.pg-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:28px;
height:28px;
border:none;
background:#ff6b00;
color:#fff;
font-size:18px;
cursor:pointer;
border-radius:50%;
z-index:5;
}

.pg-prev{
left:8px;
}

.pg-next{
right:8px;
}



/* THUMB WRAP */

.pg-thumb-wrap{
margin-top:20px;
position:relative;
padding:0 26px;
}

.pg-slider{
display:flex;
overflow-x:auto;
gap:10px;
scroll-behavior:smooth;
scrollbar-width:none;
}

.pg-slider::-webkit-scrollbar{
display:none;
}


/* EXACT SCREENSHOT BOX */

.pg-thumb{

flex:0 0 calc(33.333% - 7px);

height:72px;

background:#fff;

padding:4px;

border-radius:4px;

border:1px solid #ddd;

cursor:pointer;

}

.pg-thumb img{
width:100%;
height:100%;
object-fit:cover;
border-radius:2px;
}

.pg-thumb.active{
border:2px solid #ff6b00;
}


/* THUMB ARROWS */

.pg-thumb-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
border:none;
background:#ff6b00;
color:#fff;
cursor:pointer;
font-size:15px;
z-index:10;
}

.pg-thumb-left{
left:0;
}

.pg-thumb-right{
right:0;
}



/* MOBILE */

@media(max-width:500px){

.pg-main{
height:280px;
}

.pg-thumb{
height:65px;
}

}



/* FIX PAGE JUMP / LAYOUT SHIFT */

.pg-wrap{
width:100%;
overflow:hidden;
contain:layout;
}

.pg-main{
height:420px;   /* fixed height */
min-height:420px;
position:relative;
overflow:hidden;
background:#eee;
border-radius:8px;
}

.pg-main img{
width:100%;
height:100%;
object-fit:contain;
display:block;
aspect-ratio:1/1;
}

/* thumbnail */

.pg-thumb{
flex:0 0 calc(33.33% - 8px);
height:50px;
min-height:130px;
overflow:hidden;
}

.pg-thumb img{
width:100%;
/*! /*! height:100%; */ */
display:block;
object-fit:cover;
}


/* mobile */

@media(max-width:768px){

.pg-main{
height:300px;
min-height:300px;
}

}