.component-wrapper-video {
    width: var(--desktop-width);
    height: var(--desktop-height);
}

.wrapper-video--embed-container {
    width:100vw;
    height:100vh;
    overflow:hidden;
    position:relative;
    transform: translateX(-50vw);
    margin-left: 50%;
}


.wrapper-video--embed-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrapper-video--embed-iframe {
    pointer-events: none;
}

.wrapper-video--embed-iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
}

.wrapper-video--embed-foreground {
    pointer-events:none;
}

.component-wrapper-video--embed-foreground:has(.component-wrapper-video--embed-reel) {
    overflow: hidden;
}

.component-wrapper-video--embed-reel {
    transform: scale(1.06);
    transform-origin: top left;
}

.component-wrapper-video--embed-foreground:has( > .component-wrapper-video--embed-youtube) {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.component-wrapper-video--embed-foreground:has( > .component-wrapper-video--embed-reel),
.component-wrapper-video--embed-foreground:has( > .component-wrapper-video--embed-shorts) {
    position: relative;
    height: 0;
    padding-bottom: 144%;
}

.component-wrapper-video--embed-youtube:not(.component-wrapper-video--embed-shorts) {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(1.45);
    pointer-events: none;
}