/* Video page (design C): a card grid of core Embed blocks inside the group with class "kcg-vids".
   Wide screens: 6 tracks, the first two videos half width, the rest a third (5 videos = two full rows), and the
   last row is always filled whatever the number of videos. Tablet: 2 columns, the first video full width.
   Phone: 1 column. The thumbnail + play disc is kcg-core's light YouTube embed (plugin assets/embeds.css). */
.kcg-vids { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
.kcg-vids > * { margin: 0 !important; }
.kcg-vids .wp-block-embed { display: grid; align-content: start; gap: var(--wp--preset--spacing--30); background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--medium); overflow: hidden; }
.kcg-vids .wp-block-embed .wp-element-caption { margin: 0; padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--medium); font-weight: 600; text-align: left; }
.kcg-vids > :nth-child(-n+2) .wp-element-caption { font-size: var(--wp--preset--font-size--large); }

@media (min-width: 641px) and (max-width: 900px) {
	.kcg-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kcg-vids > :first-child, .kcg-vids > :nth-child(even):last-child { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
	.kcg-vids { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.kcg-vids > * { grid-column: span 2; }
	/* two large first; a last row of two splits in halves; a last row of one takes the full width */
	.kcg-vids > :nth-child(-n+2), .kcg-vids > :nth-child(3n+3):nth-last-child(2), .kcg-vids > :nth-child(3n+4):last-child { grid-column: span 3; }
	.kcg-vids > :only-child, .kcg-vids > :nth-child(3n+3):last-child { grid-column: 1 / -1; }
}
