/**
 * @file
 * General grid of video cards.
 *
 * The columns prop sets the full-width count; tablet caps it at two and phones
 * at one.
 */

.rn-video-card-grid {
  --rn-video-card-gap: 32px;

  display: grid;
  grid-template-columns: repeat(var(--rn-video-card-columns, 3), minmax(0, 1fr));
  gap: var(--rn-video-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Infinite scroll appends each page as its own grid; keep row spacing even. */
.rn-video-card-grid + .rn-video-card-grid {
  margin-top: var(--rn-video-card-gap);
}

.rn-video-card-grid__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.rn-video-card-grid__item::before {
  content: none;
}

@media (max-width: 900px) {
  .rn-video-card-grid {
    --rn-video-card-gap: 24px;
    grid-template-columns: repeat(min(var(--rn-video-card-columns, 3), 2), minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .rn-video-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Entrance animation (video-card-grid.js) -------------------------------- */

@keyframes rn-video-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rn-video-card-grid-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.rn-video-card-grid.is-revealing[data-reveal="stagger"] > .rn-video-card-grid__item {
  animation: rn-video-card-in 450ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rn-video-card-grid.is-revealing[data-reveal="fade"] {
  animation: rn-video-card-grid-in 400ms ease both;
}