.course_list.is-loading,
.market_list.is-loading {
  pointer-events: none;
}

.skeleton {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0ece7 25%, #f8f5f2 37%, #f0ece7 63%);
  background-size: 400% 100%;
  animation: marketSkeletonShimmer 1.2s ease infinite;
}

.skeleton-text-sm {
  height: 14px;
  max-width: 160px;
}

.skeleton-text-md {
  height: 20px;
  max-width: 280px;
  margin-top: 10px;
}

.skeleton-text-lg {
  height: 16px;
  margin-top: 12px;
}

.skeleton-button {
  height: 18px;
  max-width: 120px;
  margin-top: 14px;
}

.skeleton-number {
  height: 26px;
  max-width: 84px;
  margin-bottom: 8px;
}

.skeleton-caption {
  height: 14px;
  max-width: 110px;
}

.course_list.is-loading .course_li,
.market_list.is-loading .market_li {
  list-style: none;
}

.course_list.is-loading .course_image {
  background: #efeae4;
}

.course_list.is-loading .skeleton-image {
  aspect-ratio: 4 / 3;
}

.course_list.is-loading .skeleton-meta {
  height: 14px;
  max-width: 210px;
  margin-bottom: 14px;
}

.course_list.is-loading .skeleton-title {
  height: 24px;
  max-width: 78%;
  margin-bottom: 12px;
}

.course_list.is-loading .skeleton-desc {
  height: 16px;
  margin-bottom: 10px;
}

.course_list.is-loading .skeleton-desc.short {
  max-width: 72%;
}

.course_list.is-loading .skeleton-date {
  height: 18px;
  max-width: 110px;
}

.course_list.is-loading .skeleton-more {
  height: 18px;
  max-width: 88px;
}

.market_list.is-loading .market_thumb {
  background: #efeae4;
}

.market_list.is-loading .skeleton-thumb {
  height: 100%;
  min-height: 112px;
}

.market_list.is-loading .skeleton-cat {
  height: 14px;
  max-width: 80px;
  margin-bottom: 12px;
}

.market_list.is-loading .skeleton-market-title {
  height: 22px;
  max-width: 80%;
  margin-bottom: 12px;
}

.market_list.is-loading .skeleton-place {
  height: 15px;
  max-width: 120px;
}

.market_list.is-loading .when .skeleton {
  margin-left: auto;
}

.market_list.is-loading .skeleton-when-strong {
  height: 24px;
  max-width: 96px;
  margin-bottom: 8px;
}

.market_list.is-loading .skeleton-when-sub {
  height: 14px;
  max-width: 42px;
}

@keyframes marketSkeletonShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}