.kdmgp-grid {
column-count: 3;
column-gap: 16px;
width: 100%;
}
.kdmgp-item {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 16px;
overflow: hidden;
border-radius: 14px;
position: relative;
background: #e8e8e8;
display: block;
width: 100%;
}
.kdmgp-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.45s ease, opacity 0.6s ease;
vertical-align: bottom;
}
.kdmgp-item a {
display: block;
line-height: 0;
}
.kdmgp-hover-scale .kdmgp-item:hover img {
transform: scale(1.06);
}
.kdmgp-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.18);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.kdmgp-item:hover .kdmgp-overlay { opacity: 1; } .kdmgp-item.kdmgp-fading-out img {
opacity: 0 !important;
transform: scale(0.97);
transition: opacity var(--kdmgp-fade-ms,600ms) ease,
transform var(--kdmgp-fade-ms,600ms) ease !important;
}
@keyframes kdmgpFadeIn {
from { opacity:0; transform:scale(0.97); }
to   { opacity:1; transform:scale(1);    }
}
.kdmgp-item.kdmgp-fading-in img {
animation: kdmgpFadeIn var(--kdmgp-fade-ms,600ms) ease forwards;
}  .glightbox-container .goverlay {
background: rgba(0,0,0,0.93) !important;
} html body .glightbox-container .gclose,
html body .glightbox-container .gclose.button,
html body.glightbox-mobile .glightbox-container .gclose,
html body.glightbox-mobile .glightbox-container .gclose.button,
html body .glightbox-container .gbtn.gclose { display:         flex        !important;
visibility:      visible     !important;
opacity:         1           !important;
pointer-events:  all         !important; position:        fixed       !important;
top:             16px        !important;
right:           16px        !important;
z-index:         9999999     !important; width:           52px        !important;
height:          52px        !important;
min-width:       52px        !important;
min-height:      52px        !important;
max-width:       52px        !important;
max-height:      52px        !important;
box-sizing:      border-box  !important;
border-radius:   50%         !important; background:      rgba(0,0,0,0.65)          !important;
border:          2px solid rgba(255,255,255,0.35) !important; align-items:     center      !important;
justify-content: center      !important;
padding:         0           !important;
margin:          0           !important; font-size:       0           !important;
line-height:     0           !important; cursor:          pointer     !important;
user-select:     none;
-webkit-tap-highlight-color: transparent;
touch-action:    manipulation; transition: background 0.2s, border-color 0.2s, transform 0.22s !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html body .glightbox-container .gclose:hover,
html body .glightbox-container .gclose.button:hover,
html body.glightbox-mobile .glightbox-container .gclose:hover {
background:   rgba(220,38,38,0.85)        !important;
border-color: rgba(255,100,80,0.70)        !important;
transform:    rotate(90deg)                !important;
} html body .glightbox-container .gclose svg,
html body .glightbox-container .gclose.button svg,
html body.glightbox-mobile .glightbox-container .gclose svg {
display:     block   !important;
visibility:  visible !important;
opacity:     1       !important;
width:       20px    !important;
height:      20px    !important;
min-width:   20px    !important;
min-height:  20px    !important;
flex-shrink: 0;
pointer-events: none;
} html body .glightbox-container .gclose svg path,
html body .glightbox-container .gclose svg polygon,
html body .glightbox-container .gclose svg line,
html body .glightbox-container .gclose.button svg path,
html body .glightbox-container .gclose.button svg polygon,
html body .glightbox-container .gclose.button svg line,
html body.glightbox-mobile .glightbox-container .gclose svg path,
html body.glightbox-mobile .glightbox-container .gclose svg polygon,
html body.glightbox-mobile .glightbox-container .gclose svg line {
stroke:       #ffffff !important;
stroke-width: 2.5     !important;
fill:         none    !important;
} html body .glightbox-container .gclose svg polygon,
html body .glightbox-container .gclose.button svg polygon {
fill:   #ffffff !important;
stroke: none    !important;
} html body .glightbox-container .gnext,
html body .glightbox-container .gprev {
display:         flex        !important;
visibility:      visible     !important;
opacity:         1           !important;
align-items:     center      !important;
justify-content: center      !important;
width:           52px        !important;
height:          52px        !important;
min-width:       52px        !important;
min-height:      52px        !important;
box-sizing:      border-box  !important;
border-radius:   50%         !important;
background:      rgba(0,0,0,0.55)          !important;
border:          2px solid rgba(255,255,255,0.25) !important;
padding:         0           !important;
cursor:          pointer     !important;
transition: background 0.2s, border-color 0.2s !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
html body .glightbox-container .gnext:hover,
html body .glightbox-container .gprev:hover {
background:   rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.70) !important;
}
html body .glightbox-container .gnext svg path,
html body .glightbox-container .gnext svg polygon,
html body .glightbox-container .gprev svg path,
html body .glightbox-container .gprev svg polygon {
fill:         #ffffff !important;
stroke:       #ffffff !important;
stroke-width: 1.5     !important;
} html body .glightbox-container .gslide-image img {
max-height:    90vh    !important;
max-width:     92vw    !important;
object-fit:    contain !important;
border-radius: 10px    !important;
width:         auto    !important;
height:        auto    !important;
} html body .glightbox-container .gdesc-inner {
padding:       12px 16px                 !important;
background:    rgba(0,0,0,0.70)          !important;
border-radius: 0 0 10px 10px             !important;
}
html body .glightbox-container .gslide-title {
color:       #ffffff !important;
font-size:   14px    !important;
font-weight: 500     !important;
margin:      0       !important;
} @media (max-width: 1200px) { .kdmgp-grid { column-count: 3; } }
@media (max-width: 900px)  { .kdmgp-grid { column-count: 2; } }
@media (max-width: 600px) {
.kdmgp-grid        { column-count: 1; column-gap: 10px; }
.kdmgp-item        { margin-bottom: 10px; }
.kdmgp-hover-scale .kdmgp-item:hover img { transform: none !important; }
.kdmgp-item:hover .kdmgp-overlay          { opacity: 0 !important; }
html body .glightbox-container .gclose,
html body .glightbox-container .gclose.button,
html body.glightbox-mobile .glightbox-container .gclose {
top:        max(env(safe-area-inset-top,0px),14px) !important;
right:      14px !important;
width:      56px !important;
height:     56px !important;
min-width:  56px !important;
min-height: 56px !important;
max-width:  56px !important;
max-height: 56px !important;
}
html body .glightbox-container .gnext,
html body .glightbox-container .gprev {
width:      52px !important;
height:     52px !important;
min-width:  52px !important;
min-height: 52px !important;
}
html body .glightbox-container .gslide-image img {
max-width:  100vw !important;
max-height: 80vh  !important;
}
}
@media (max-width: 390px) {
html body .glightbox-container .gclose,
html body .glightbox-container .gclose.button,
html body.glightbox-mobile .glightbox-container .gclose {
top:   10px !important;
right: 10px !important;
}
}