Image Skeleton

<div class="nuda-skimg" aria-hidden="true">
  <svg viewBox="0 0 24 24" width="34" height="34" class="nuda-skimg__icon"
       fill="none" stroke="currentColor" stroke-width="1.5">
    <rect x="3" y="4" width="18" height="16" rx="2" />
    <circle cx="8.5" cy="9" r="1.6" />
    <path d="M21 16l-5-5-9 9" />
  </svg>
</div>

/* Image Skeleton
   Image placeholder with a centered icon and a lime shimmer sweep.
   Customize: --skimg-block, --skimg-glow */

.nuda-skimg {
  --skimg-block: rgba(255, 255, 255, 0.05);
  --skimg-glow: rgba(228, 255, 84, 0.12);
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 130px;
  border-radius: 10px;
  background: var(--skimg-block);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nuda-skimg__icon { color: rgba(255, 255, 255, 0.18); }

.nuda-skimg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--skimg-glow) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: nuda-skimg 1.7s ease-in-out infinite;
}

@keyframes nuda-skimg {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-skimg::after { animation: none; opacity: 0; }
}