Skeleton

.skeleton {
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  padding: 24px 24px 32px 24px;
}

.skeleton__line {
  display: flex;
  align-items: center;
  gap: 16px;
}

.skeleton__line + .skeleton__line {
  margin-top: 16px;
}
.skeleton__line + .skeleton__group {
  margin-top: 16px;
}

.skeleton__group {
  flex-grow: 1;
}

.skeleton__circle {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-repeat: repeat-x;
  background: linear-gradient(
    90deg,
    #dde2e5 6.44%,
    #e2e6e8 38.47%,
    #f3f5f5 56.48%,
    #e3e7ea 77.5%,
    #dde2e5 102.52%
  );
  animation: 90s linear 0s infinite normal skeletonBackground;
}
.skeleton__bar {
  min-height: 20px;
  background-repeat: repeat-x;
  background: linear-gradient(
    90deg,
    #dde2e5 6.44%,
    #e2e6e8 38.47%,
    #f3f5f5 56.48%,
    #e3e7ea 77.5%,
    #dde2e5 102.52%
  );
  animation: 50s linear 0s infinite normal skeletonBackground;
}

@media screen and (max-width: 768px) {
  .skeleton__circle {
    animation: 30s linear 0s infinite normal skeletonBackground;
  }
  .skeleton__bar {
    animation: 20s linear 0s infinite normal skeletonBackground;
  }
}

.skeleton__bar + .skeleton__bar {
  margin-top: 8px;
}

.skeleton__bar_small {
  width: 25%;
}
.skeleton__bar_medium {
  width: 50%;
}
.skeleton__bar_big {
  width: 75%;
}
.skeleton__bar_full {
  width: 100%;
}

@keyframes skeletonBackground {
  from {
    background-position: 0vw;
  }
  to {
    background-position: 110vw;
  }
}
.skeleton_preview {
  width: 100%;
  margin: 0 25px 0 25px;
}