/* =========================================================
   V30 — seven videos: 4 + 3, last row centred
   ========================================================= */

@media (min-width: 900px) {
  .video-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }

  .video-card {
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 0;
  }

  /* Keep the play control above the longer descriptions. */
  .video-card-play {
    top: 36%;
  }
}

@media (min-width: 1280px) {
  .video-card {
    flex-basis: calc((100% - 36px) / 3);
  }

  .video-card-copy {
    left: 24px;
    right: 24px;
    bottom: 22px;
  }

  .video-card-eyebrow {
    margin-bottom: 9px;
    font-size: 8px;
  }

  .video-card-copy h3 {
    font-size: 36px;
  }

  .video-card-copy p {
    margin-top: 9px;
    font-size: 10px;
    line-height: 1.72;
  }

  .video-card-tags {
    gap: 6px;
    margin-top: 14px;
  }

  .video-card-tags span {
    min-height: 23px;
    padding: 0 8px;
    font-size: 7px;
  }

  .video-card-play {
    top: 36%;
  }

  .video-card-play > span {
    width: 62px;
  }

  .video-card-play svg {
    width: 21px;
    height: 21px;
  }

  .video-card-play small {
    display: block;
    font-size: 8px;
  }

  .video-card-index {
    top: 18px;
    right: 18px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 8px;
  }

  .video-card-close {
    top: 16px;
    left: 16px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 8px;
  }
}