/* Grid */
.cirec-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:28px; }
/* Card */
.cirec-card{ text-align:center; transition:opacity .3s, filter .3s; cursor:pointer; position:relative; }
.cirec-card .cirec-image-wrapper{ width:220px; height:220px; margin:0 auto 10px; border-radius:50%; overflow:hidden; position:relative; }
.cirec-card .cirec-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cirec-card .cirec-overlay{ position:absolute; inset:0; background:var(--overlay, rgba(0,0,0,.5)); opacity:var(--alpha, .6); transition:.3s; }
.cirec-card:hover .cirec-overlay{ opacity:0; }
.cirec-title{ font-size:18px; line-height:1.2; margin:8px 0; }
.cirec-icons{ line-height:0; }
.cirec-icon-hover{ display:none; }
.cirec-card:hover .cirec-icon-normal{ display:none; }
.cirec-card:hover .cirec-icon-hover{ display:inline-block; }
.cirec-text{ opacity:0; max-height:0; overflow:hidden; transition:opacity .3s, max-height .3s, margin .3s; margin:0; }
.cirec-card:hover .cirec-text{ opacity:1; max-height:260px; margin-top:8px; }
/* Dim other cards */
[data-dim-others="yes"] .cirec-card.z-inactive{ filter: grayscale(100%); opacity:.55; }