.content-grid {
  --nVisibleItems: 1;
  column-gap: 20px;
  row-gap: 16px;
}

@media (min-width: 280px) {
  .content-grid {
    --nVisibleItems: 2;
  }
}

@media (min-width: 786px) {
  .content-grid {
    --nVisibleItems: 5;
  }
}

@media (min-width: 1024px) {
  .content-grid {
    --nVisibleItems: 5;
    row-gap: 32px;
  }
}

@media (min-width: 1280px) {
  .content-grid {
    --nVisibleItems: 6;
    row-gap: 32px;
  }
}

@container (min-width: 300px) {
  .content-grid {
    --nVisibleItems: 2;
    row-gap: 16px;
  }
}

@container (min-width: 600px) {
  .content-grid {
    --nVisibleItems: 4;
    column-gap: 20px;
  }
}

@container (min-width: 900px) {
  .content-grid {
    --nVisibleItems: 6;
    column-gap: 20px;
    row-gap: 32px;
  }
}

@container (min-width: 1200px) {
  .content-grid {
    --nVisibleItems: 6;
    column-gap: 20px;
    row-gap: 32px;
  }
}

.play-btn-opacity {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.play-btn-opacity:hover {
  opacity: 1;
}