.video-section { padding: 38px 0 48px; background: #e8effc; border-block: 1px solid var(--line); }
.video-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.video-eyebrow { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); margin-bottom: 12px; }
.video-heading h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.video-heading p { max-width: 30ch; font-size: .98rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; align-items: start; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid #cbd8ed; border-radius: 6px 22px 6px 6px; background: #fff; }
.video-card video { display: block; width: 100%; aspect-ratio: 29 / 53; object-fit: contain; background: #101a35; }
.video-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-size: .9rem; font-weight: 700; }
.video-number { color: var(--primary); font-variant-numeric: tabular-nums; font-weight: 500; }
.video-error { padding: 0 16px 16px; font-size: .85rem; }
.video-more { text-align: center; }
.video-more button { border: 0; font: inherit; font-weight: 700; cursor: pointer; margin-top: 28px; }
.video-status { max-width: none; font-size: .85rem; margin-top: 16px; }
.video-status:empty { display: none; }
.video-section [hidden] { display: none; }
@media (max-width: 600px) {
  .video-heading { display: block; }
  .video-heading p { margin-top: 16px; max-width: 40ch; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .video-card figcaption { padding: 12px; font-size: .8rem; }
}
@media (max-width: 420px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; }
}