.youtube-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:1rem;margin:1rem}.youtube-player{position:relative;padding-top:56.25%;overflow:hidden;max-width:100%;background:#000}.youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.youtube-player .cover{position:absolute;top:0;right:0;bottom:0;left:0;max-width:100%;width:100%;height:auto;object-fit:cover;display:block;border:0;margin:auto;cursor:pointer;background-size:100%;background-position:50% 50%;background-repeat:no-repeat}.youtube-player .play-wrapper{position:absolute;top:50%;left:50%;width:80px;height:80px;border:0;border-radius:50%;margin-top:-40px;margin-left:-40px;background-color:hwb(var(--clr-accent, 209 0% 0%)/.4);transition-duration:.5s;transition-property:background-color,transform;cursor:pointer}.youtube-player .cover:hover+.play-wrapper,.youtube-player .cover:focus+.play-wrapper,.youtube-player .play-wrapper:hover,.youtube-player .play-wrapper:focus{background-color:hwb(var(--clr-accent, 209 0% 0%)/.75);transform:scale(1.1)}.youtube-player .play{position:absolute;top:50%;left:50%;width:28px;height:28px;margin-top:-14px;margin-left:-12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='white' d='M13.6 7.2l-10-7A1 1 0 0 0 2 1v14c0 .8.9 1.3 1.6.8l10-7c.5-.4.5-1.2 0-1.6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}