/*********************************************
 * Video Popup
**********************************************/
.twc-video-popup {
    --vp-width:90px;
    --vp-size-icon:32px;
}
.twc-video-popup__video-link {display:block; overflow:hidden;}
.twc-video-popup__video-bg {
    transition:var(--twc-transition);
    height:clamp(375px, 33.75vw, 486px);
}
.twc-video-popup__video-bg:before {
    content:""; display:block; z-index:1; pointer-events:none;
    position:absolute; inset:0; background:#000; opacity:0;
    transition:var(--twc-transition);
}
.twc-video-popup__video-link:hover .twc-video-popup__video-bg {transform:scale(1.05);}
.twc-video-popup__video-link:hover .twc-video-popup__video-bg:before {opacity:.6;}

/* button */
.twc-video-popup__video-button-inner {
    width:var(--vp-width); height:var(--vp-width);
    border-radius:50%; background:#fff;
    color:var(--twc-color-primary); font-size:var(--vp-size-icon);
    transition:var(--twc-transition);
}
.twc-video-popup__video-button-inner i {display:block; transform:translate(.1em, .1em);}
.twc-video-popup__video-button-inner:hover {
    background:var(--twc-color-primary);
    color:var(--twc-color-on-primary);
}

/*********************************************
 * Video Popup Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .twc-video-popup {
        --vp-width:60px;
        --vp-size-icon:25px;
    }
}