.youtube-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0; }
.youtube-card { min-width: 0; }
.youtube-preview, .youtube-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .5rem; }
.youtube-preview { position: relative; padding: 0; overflow: hidden; cursor: pointer; background: #111; }
.youtube-preview[hidden] { display: none; }
.youtube-preview img { width: 100%; height: 100%; object-fit: cover; }
.youtube-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); background: #c00; color: white; border-radius: .7rem; padding: .4rem 1rem; font-size: 1.5rem; }
.youtube-play svg { width: 1em; height: 1em; vertical-align: -.125em; fill: #fff; }
.youtube-preview:hover .youtube-play, .youtube-preview:focus-visible .youtube-play { background: #900; }
.youtube-preview:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 4px; }
.youtube-card h3 { font-size: 1.1rem; line-height: 1.5; margin: .8rem 0 .3rem; overflow-wrap: anywhere; }
.youtube-card time { color: #626762; font-size: .9rem; }
@media (max-width: 991px) { .youtube-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .youtube-gallery { grid-template-columns: 1fr; } }