.crt-list{align-items:stretch;}
.crt-item{color:#222;cursor:pointer;}
.crt-thumb{position:relative;display:flex;align-items:center;justify-content:center;width:305px;height:390px;max-width:100%;margin:0 auto;overflow:hidden;background:#F4F4F4;transition:border-color .25s ease,box-shadow .25s ease;}
.crt-thumb img{position:relative;display:block;width:200px;height:280px;object-fit:contain;transition:transform .35s ease,filter .35s ease;box-shadow:0 0 20px rgba(0,0,0,0.1);}
.crt-thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .25s ease;z-index:1;}
.crt-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;font-size:28px;color:#fff;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1f8f4a;box-shadow:0 6px 16px rgba(31,143,74,.25);transition:opacity .2s ease,transform .2s ease;z-index:2;pointer-events:none;}
.crt-name{font-size:16px;font-weight:600;text-align:center;}
.crt-bold{font-weight:700;color:#000;text-align:center;}
.crt-item:hover .crt-thumb{border-color:#1f8f4a;box-shadow:inset 0 0 0 3px #1f8f4a,0 8px 20px rgba(0,0,0,.06);}
.crt-item:hover .crt-thumb::before{background:rgba(0,0,0,.18);}
.crt-item:hover .crt-zoom{opacity:1;transform:translate(-50%,-50%) scale(1);}

.modal{z-index:20000;}
.modal-backdrop{z-index:19990;}

#crtModal .modal-dialog{max-width:500px;margin:0 auto;display:flex;align-items:center;min-height:100dvh;}
#crtModal .modal-content{width:500px;height:750px;border:0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column; background: #F4F4F4;}
#crtModal .modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;}
#crtModal img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 20px rgba(0,0,0,.25);}

@media (max-width:370px){
  .crt-thumb{width:260px;height:340px;}
  .crt-thumb img{width:170px; height:240px;}
  .crt-name{font-size:15px;}

  #crtModal .modal-dialog{max-width:80%;} 
  #crtModal .modal-content{width:100%;height:auto;max-height:80dvh;}
  #crtModal img{max-width:80%;max-height:100%;object-fit:contain; margin: 60px 0 40px; box-shadow:0 0 15px rgba(0,0,0,.3);}
}