/* Skeleton во время перестановки карточек. */
.teaser--skeleton {
  pointer-events: none;
}

.teaser--skeleton.teaser--large {
  display: block;
}

.teaser__skeleton-media,
.teaser__skeleton-content > * {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.075);
}

.teaser__skeleton-media {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.teaser__skeleton-content {
  padding: 15px 16px 17px;
}

.teaser__skeleton-content > * {
  border-radius: 999px;
}

.teaser__skeleton-content span {
  width: 46%;
  height: 12px;
  margin-bottom: 18px;
}

.teaser__skeleton-content strong {
  width: 92%;
  height: 17px;
  margin-bottom: 10px;
}

.teaser__skeleton-content strong:nth-child(3) {
  width: 70%;
}

.teaser__skeleton-content small {
  width: 38%;
  height: 9px;
  margin-top: 24px;
}

.teaser__skeleton-media::after,
.teaser__skeleton-content > *::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.13) 48%, transparent 76%);
  content: "";
  transform: translateX(-100%);
  animation: content-skeleton-wave 1.05s infinite;
}

.teaser-load-error {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

@keyframes content-skeleton-wave {
  to { transform: translateX(100%); }
}

@media (max-width: 720px) {
  .teaser--skeleton .teaser__skeleton-media {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teaser__skeleton-media::after,
  .teaser__skeleton-content > *::after {
    animation: none;
  }
}