.div{width:98%}.div .video-preview-title{color:#000;text-align:center;background:#efefef;border:1px solid #ccc;border-radius:0 0 3px 3px;min-height:60px;padding:10px;font-size:16px;line-height:1.2}.div .video-preview{padding-top:56.25%;position:relative}.div .video-preview .video-preview-thumbnail{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.div .video-preview .video-preview-shadow{z-index:1;-webkit-backdrop-filter:grayscale(.5);backdrop-filter:grayscale(.5);color:#fff9;background:#0006;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:10px;display:flex;position:absolute;top:0;left:0}.div .video-preview .video-preview-shadow .svg-icon{font-size:3em}@media screen and (width>=820px){.div .video-preview{cursor:pointer}.div .video-preview .video-preview-shadow{transition:all .2s}.div .video-preview:hover .video-preview-shadow{color:#fff;-webkit-backdrop-filter:grayscale(0);backdrop-filter:grayscale(0)}}