/*
      <div class="video-frame">
            <a href="https://www.youtube.com/embed/38UtxCgtw_A" target="_blank">
                <img src="/assets/images/background/competence.webp">
            </a>
        </div>
*/


.video-frame {
    position: relative;
}

    .video-frame a:before {
        content: '';
        position: absolute;
        top: 45%;
        left: 45%;
        z-index: 2;
        width: 60px;
        height: 60px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(/assets/images/icons/play.svg);
        -webkit-transition: .5s ease;
        transition: .5s ease;
    }

    .video-frame a:hover:before {
        transform: scale(1.5);
    }

    .video-frame:before {
        content: '';
        position: absolute;
        bottom: -20px;
        right: -30px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(/assets/images/icons/dots.svg);
        width: 144px;
        height: 94px;
        z-index: -1
    }

    .video-frame img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 20pt;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        transition: .5s ease;
    }

    .video-frame a:hover img {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }

    .video-frame a:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: #66696c;
        opacity: .2;
        -webkit-transition: .5s ease;
        transition: .5s ease;
        border-radius: 20pt
    }