*{box-sizing:border-box}
.czt-mie{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;background:#d1d1d1}
.czt-mie .background-wrapper{position:relative;width:100%;height:100%;transition:filter .5s ease}
.czt-mie .background-wrapper.blur{filter:blur(8px)}
.czt-mie .tile{position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;cursor:pointer;background:linear-gradient(145deg,#fafafa,#c1c1c1),linear-gradient(315deg,#e0e0e0,#fff);background-blend-mode:multiply;box-shadow:20px 20px 30px rgba(0,0,0,.4),-18px -18px 25px rgba(255,255,255,.95),inset 5px 5px 8px rgba(255,255,255,.85),inset -5px -5px 8px rgba(0,0,0,.15);filter:drop-shadow(8px 8px 8px rgba(0,0,0,.2));animation:floatTile 5s ease-in-out infinite alternate;transform-style:preserve-3d}
@keyframes floatTile{0%{transform:translate(0,0) scale(1.03)}50%{transform:translate(3px,-3px) scale(1.035)}100%{transform:translate(-2px,2px) scale(1.03)}}
.czt-mie .tile img{width:100%;height:100%;object-fit:cover;user-select:none;backface-visibility:hidden;pointer-events:none;display:block}
.czt-mie .overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.czt-mie .overlay img{transform-origin: 0 0;position:absolute;border-radius:0;opacity:0;transform:translate(0,0) scale(.3);transition:transform 1.2s ease,opacity .5s ease,box-shadow 1.2s ease;max-width:none;max-height:none;will-change:transform,opacity,box-shadow;box-shadow:0 0 0 rgba(255,255,255,0)}
.czt-mie .overlay img.glow{box-shadow:0 0 10px 3px rgba(255,255,255,.8),0 0 20px 6px rgba(255,255,255,.5),0 0 40px 8px rgba(255,255,255,.3)}
.czt-mie .dark-overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .5s ease}
.czt-mie .dark-overlay.active{opacity:1;pointer-events:auto}

.czt-mie .tile{border:1px dashed rgba(0,0,0,.15)}

/* caption overlay on main image hover */
.czt-mie .overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

.czt-mie .overlay.hover .caption{ opacity:1; }
.czt-mie .overlay .caption .title{ display:block; font-weight:600; margin-bottom:2px; }
.czt-mie .overlay .caption .author{ display:block; opacity:.9; font-size:13px; }

/* center image caption (fixed positioning) */
.czt-mie { position: relative; }
.czt-mie .overlay{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
.czt-mie .overlay img{ position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:auto; }
.czt-mie .overlay .caption-box{ position:absolute; left:0; top:0; width:0; height:0; z-index:9; pointer-events:none; }
.czt-mie .overlay .caption-box .cap-grad{
  position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity .18s ease;
}
.czt-mie .overlay .caption-box .cap-text{
  position:absolute; left:12px; right:12px; bottom:10px;
  color:#fff; font:14px/1.45em Malgun Gothic, Apple SD Gothic Neo, Arial, system-ui;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .18s ease; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.czt-mie .overlay .caption-box.show .cap-grad,
.czt-mie .overlay .caption-box.show .cap-text{ opacity:1; }