.custom-skeleton {
  position: relative;
  width: 380px;
  height: 185px;
  overflow: hidden;
  opacity: 0.85;
  --base-color: #e2e8f0;
  --shimmer-color: rgba(255, 255, 255, 0.75);
}

.custom-skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 25px at 25px 25px, var(--base-color, #e2e8f0) 100%, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 16px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 12px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0);
  background-size:
    calc(25px * 2) 180px,
    180px 180px,
    120px 180px,
    90% 180px,
    75% 180px,
    50% 180px;
  background-position:
    left 20px top 20px,
    left 85px top 25px,
    left 85px top 50px,
    left 20px top 95px,
    left 20px top 120px,
    left 20px top 145px;
  background-repeat: repeat-y;
  z-index: 1;
}

.custom-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    var(--shimmer-color, rgba(255, 255, 255, 0.75)) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat-y;
  mask-image:
    radial-gradient(circle 25px at 25px 25px, var(--base-color, #e2e8f0) 100%, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 16px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 12px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0);
  mask-size:
    calc(25px * 2) 180px,
    180px 180px,
    120px 180px,
    90% 180px,
    75% 180px,
    50% 180px;
  mask-position:
    left 20px top 20px,
    left 85px top 25px,
    left 85px top 50px,
    left 20px top 95px,
    left 20px top 120px,
    left 20px top 145px;
  mask-repeat: repeat-y;
  -webkit-mask-image:
    radial-gradient(circle 25px at 25px 25px, var(--base-color, #e2e8f0) 100%, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 16px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 12px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0),
    linear-gradient(var(--base-color, #e2e8f0) 10px, transparent 0);
  -webkit-mask-size:
    calc(25px * 2) 180px,
    180px 180px,
    120px 180px,
    90% 180px,
    75% 180px,
    50% 180px;
  -webkit-mask-position:
    left 20px top 20px,
    left 85px top 25px,
    left 85px top 50px,
    left 20px top 95px,
    left 20px top 120px,
    left 20px top 145px;
  -webkit-mask-repeat: repeat-y;
  animation: shimmer-effect 1.5s infinite linear;
}

@keyframes shimmer-effect {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}