img[data-image-load-state="loading"] {
  background-color: #e2e8f0;
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(177, 211, 239, 0.92) 50%,
    rgba(255, 255, 255, 0.82) 62%,
    rgba(255, 255, 255, 0) 78%
  );
  background-position: 100% 0;
  background-size: 220% 100%;
  animation: image-loading-state-shimmer 1.35s linear infinite;
}

.dark img[data-image-load-state="loading"] {
  background-color: #1e293b;
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(148, 163, 184, 0.24) 38%,
    rgba(62, 133, 198, 0.3) 50%,
    rgba(148, 163, 184, 0.24) 62%,
    rgba(255, 255, 255, 0) 78%
  );
}

@keyframes image-loading-state-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  img[data-image-load-state="loading"] {
    animation: none;
    background-position: 50% 0;
  }
}