.wtisg{ --ring:#e2e8f0; --muted:#475569; --shadow:0 10px 30px rgba(2,6,23,.07); }
.wtisg *{ box-sizing:border-box; }
.wtisg__card{ background:#fff; border:1px solid var(--ring); border-radius:16px; box-shadow:var(--shadow); padding:12px; width:100%; }
.wtisg__img{ width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#cbd5e1,#94a3b8); }
.wtisg__img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.wtisg__name{ margin:.6rem 0 .15rem; font-weight:800; font-size:1rem; }
.wtisg__role{ color:var(--muted); font-size:.9rem; line-height:1.35; }
.wtisg__badge{ display:inline-block; margin-top:.4rem; background:color-mix(in oklab, var(--tag,#c7d2fe) 18%, white); color:#0f172a; border:1px solid var(--tag,#c7d2fe); border-radius:999px; padding:.18rem .55rem; font-size:.78rem; }

/* Slider layout */
.wtisg__slider{ position:relative; }
.wtisg__viewport{ overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.wtisg__viewport::-webkit-scrollbar{ display:none; }
.wtisg__track{ display:flex; gap:var(--gap,16px); padding:0; margin:0; }
.wtisg__track > .wtisg__card{ flex:0 0 var(--cardw, 20%); scroll-snap-align:start; }

/* Nav arrows */
.wtisg__nav{ position:absolute; top:50%; transform:translateY(-50%); width:var(--arrow-size,56px); height:var(--arrow-size,56px); border-radius:999px; background:#fff; border:1px solid var(--ring); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; z-index:3; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.wtisg__nav--left{ left:-8px; }
.wtisg__nav--right{ right:-8px; }
.wtisg__navicon{ font-size:28px; line-height:1; color:#0f172a; }
.wtisg__nav .wtisg__navlottie{ position:absolute; inset:0; display:none; transform-origin:center; }
.wtisg__nav.is-active{ opacity:1; visibility:visible; }
.wtisg__nav.has-lottie .wtisg__navicon{ display:none; }
.wtisg__nav.has-lottie .wtisg__navlottie{ display:block; }
.wtisg__navlottie--right{ transform: rotate(var(--rot-right, 0deg)); }
.wtisg__navlottie--left{ transform: rotate(var(--rot-left, 0deg)); }

/* Masonry */
.wtisg__masonry{ column-count:4; column-gap:var(--gap,16px); }
.wtisg__masonry > .wtisg__card{ break-inside:avoid; margin:0 0 var(--gap,16px); }

/* Responsive */
@media (max-width:1024px){
  .wtisg__masonry{ column-count:3; }
}
@media (max-width:768px){
  .wtisg__masonry{ column-count:2; }
}

/* Spacing */
.wtisg{ --gap:16px; }