.skeleton {
  background: linear-gradient(100deg, #f0f0f0 40%, #e6e6e6 50%, #f0f0f0 60%);
  background-size: 200% 100%;
  animation: skeleton 1.2s infinite linear;
  border-radius: var(--radius-s);
  position: relative;
  overflow: hidden;
}

@keyframes skeleton {
  to {
    background-position-x: -200%;
  }
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: translateX(-100%);
  animation: skeleton-loading 1.4s infinite;
}

@keyframes skeleton-loading {
  to {
    transform: translateX(100%);
  }
}

.skeleton--media {
  width: 100%;
  height: 100%;
}

.skeleton--badge {
  width: 80px;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton--title {
  width: 70%;
  height: 28px;
  margin-bottom: 12px;
}

.skeleton--section-title {
  width: 40%;
  height: 22px;
  margin: 32px 0 16px;
}

.skeleton--text {
  width: 100%;
  height: 14px;
  margin-bottom: 8px;
}

.skeleton--text.short {
  width: 70%;
}

.skeleton--meta {
  width: 80px;
  height: 14px;
}

.skeleton--button {
  width: 160px;
  height: 44px;
  border-radius: var(--radius-pill);
}

.skeleton--price {
  width: 60px;
  height: 18px;
}

.skeleton--list-item {
  height: 18px;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}