.cards.skeleton-card,
.cs_cards.skeleton-card { pointer-events: none; width: 100%; }
.cards.skeleton-card { max-width: 492px; }
.cs_cards.skeleton-card { max-width: 490px; }
.cards.skeleton-card .card-container,
.cs_cards.skeleton-card .card-container { width: 100%; }
.skeleton-card { pointer-events: none; }

.thumbnail,
.dp,
.work_logos {
  background-color: var(--grey50, #f7f7f7);
}

.sk {
  background-color: #eef0f3;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

.sk-thumb { aspect-ratio: 16 / 9; width: 100%; border-radius: 16px 16px 0 0; }
.sk-dp { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; }
.sk-line { height: 12px; }
.sk-line--lg { height: 16px; }
.sk-logo { width: 24px; height: 24px; border-radius: 50%; }

.sk-w20 { width: 20%; }
.sk-w30 { width: 30%; }
.sk-w40 { width: 40%; }
.sk-w60 { width: 60%; }
.sk-w70 { width: 70%; }
.sk-w80 { width: 80%; }

.sk-thumb--43 { aspect-ratio: 4 / 3; border-radius: 12px 12px 0 0; }
.sk-avatar { width: 40px; height: 40px; border-radius: 50%; }
.sk-media { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.sk-bubble { width: 220px; height: 40px; border-radius: 16px; }
.sk-bubble--short { width: 140px; }

.work-card.skeleton-card { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #e7e7e9; }
.works-feed-item.skeleton-card { width: 100%; }
.chat-list-item.skeleton-card { width: 100%; }