.video-container{margin:auto;position:relative;width:75%}.video-container:hover{cursor:pointer}.video-container:before{background-color:var(--secondary-accent);content:"";height:40%;left:-20px;position:absolute;top:-20px;width:40%;z-index:0}.video-container img{position:relative;width:100%}span.play-btn{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}span.play-btn svg{z-index:1}span.play-btn:before{background-color:var(--primary-accent);content:"";height:100%;opacity:.7;position:absolute;transform:scale(.15);transition:all .5s ease-in-out;width:100%;z-index:0}.video-container:hover span.play-btn:before{transform:scale(1);width:100%}div#yt-modal{align-items:center;background-color:rgba(0,0,0,.8);display:none;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2}div#yt-modal.show{display:flex}.modal-content{width:50%}.modal-body{padding-bottom:56.25%;position:relative;width:100%}.yt-video{border:0;height:100%;left:0;position:absolute;top:0;width:100%}span#close-modal{background-color:#fff;border-radius:10px;font-size:20px;font-weight:700;padding:5px 15px;position:absolute;right:-15px;top:-15px;z-index:1}span#close-modal:hover{cursor:pointer}@media screen and (max-width:769px){div#yt-modal{align-items:start}.modal-content{height:100vh;width:100%}.modal-body{height:100vh}span#close-modal{bottom:10%;right:15px;top:auto}.video-container{width:100%}}