.lay-skeleton {
  .lay-skeleton-item {
    height: 16px;
    border-radius: 5px;
    margin-bottom: 16px;
    background: #eeeeee;
  }
  .lay-skeleton-type--p {
    height: 16px;
    border-radius: 5px;
    margin-bottom: 16px;
    background: #eeeeee;
  }

  .lay-skeleton-type--image {
    width: 240px;
    height: 240px;
    background: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 40px;
    }
  }
}

.lay-skeleton-animated {
  .lay-skeleton-type--image {
    width: 240px;
    height: 240px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 40px;
    }
  }
  .lay-skeleton-item {
    height: 16px;
    border-radius: 5px;
    margin-bottom: 16px;
    background: #eeeeee;
    background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
    background-size: 400% 100%;
    animation: lay-skeleton-loading 1.2s ease infinite;
  }
}

.lay-skeleton-first {
  width: 30%;
}

.lay-skeleton-last {
  width: 62.8%;
}

@keyframes lay-skeleton-loading {
  0% {
    background-position: 100% 50%;
  }

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