.chhc-grid{
  display:grid;
  grid-template-columns:repeat(var(--chhc-cols,3),minmax(0,1fr));
  gap:8px;
  margin:18px 0;
}
.chhc-card{
  display:block;
  overflow:hidden;
  border:1px solid #d7dce5;
  background:#fff;
  color:inherit;
  text-decoration:none!important;
  border-radius:4px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.chhc-card[href]:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  border-color:#8464d9;
}
.chhc-image-wrap{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chhc-image{
  width:100%!important;
  height:100%!important;
  display:block;
  object-fit:contain;
  object-position:center center;
  margin:0!important;
  background:#f3f4f6;
}
.chhc-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#7a7f87;font-size:13px;background:#f3f4f6;
}
.chhc-bottom{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#fff;
  border-top:1px solid #eceff3;
}
.chhc-title{
  min-width:0;
  flex:1;
  font-size:14px;
  line-height:1.35;
  font-weight:700;
  color:#222;
}
.chhc-arrow{
  width:24px;height:24px;flex:0 0 24px;border:2px solid currentColor;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:#333;
  padding-bottom:2px;
}
@media(max-width:700px){
  .chhc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .chhc-bottom{padding:7px 8px;min-height:38px}
  .chhc-title{font-size:13px}
  .chhc-arrow{width:21px;height:21px;flex-basis:21px;font-size:19px}
}