.wti-sp{ color:#0f172a; }
.wti-sp__heading{ text-align:center; font-weight:800; margin:2rem 0 1rem; }

.wti-sp__grid{
  --cols:4; --cols-tab:3; --cols-mob:2; --gap:20px; --radius:16px; --tile-h:140px; --padX:16px;
  --tint1:#183f97; --tint2:#2a6bff; --tintAngle:135deg; --tint:.35;
  display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:var(--gap);
}
@media (max-width:1024px){ .wti-sp__grid{ grid-template-columns:repeat(var(--cols-tab), minmax(0,1fr)); } }
@media (max-width:640px){ .wti-sp__grid{ grid-template-columns:repeat(var(--cols-mob), minmax(0,1fr)); } }

.wti-sp__item{ display:block; text-decoration:none; opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.wti-sp__item.is-in{ opacity:1; transform:translateY(0); }

.wti-sp__tile{
  height:var(--tile-h); border-radius:var(--radius);
  background:#fff; border:1px solid #e7ecf3; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding-inline: var(--padX);
  box-shadow:0 4px 10px rgba(16,24,40,.05);
  transition:box-shadow .25s ease;
}
.wti-sp__tile:hover{ box-shadow:0 12px 30px rgba(16,24,40,.16); }
.wti-sp__tile .wti-sp__tint{ position:absolute; inset:0; background:linear-gradient(var(--tintAngle), var(--tint1), var(--tint2)); opacity:var(--tint); mix-blend-mode:multiply; }

.wti-sp__logo{ max-width:100%; max-height:70%; object-fit:contain; display:block; filter:none; opacity:1; transition:filter .25s ease, opacity .25s ease; }
.wti--gray .wti-sp__logo{ filter:grayscale(100%) contrast(1) brightness(.9); opacity:.9; }
.wti--gray:hover .wti-sp__logo{ filter:none; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .wti-sp__item{ transition:none; transform:none; opacity:1; }
  .wti-sp__tile{ transition:none; }
  .wti-sp__logo{ transition:none; }
}