.skeleton-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background-color: #888;
    width: calc(100% - 10px);
    height: 20px;
  }

  .skeleton-text::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading_text 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  }

  .skeleton-card {
    position: relative;
    background-color: #f6f7f8;
    overflow: hidden;
    width: 100px;
    height: 150px;
  }

  .skeleton-card::before {
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading_card 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  }

  @keyframes loading_card {
    0% {
      transform: translate(-150%, -150%);
    }
    100% {
      transform: translate(150%, 150%);
    }
  }


  @keyframes loading_text {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }