.video-features iframe{
aspect-ratio: 4/3;
border: 0;
padding: 0;
margin: 0;
}
@media (min-width: 768px){
.video-features > .elementlist{
display: flex;
}
.video-features > .elementlist > div{
flex: 0 0 50%;
align-self: center;
}
.video-features > .elementlist > div:first-child{
z-index: -1
}
.video-features iframe{
aspect-ratio: 1/1;
height: 400px;
}
@supports (--foo: red) {
.video-features > .elementlist > div:last-child .elementlist{
position: relative;
--bg-height: 50px;
--bg-top: -50px;
--bg-opacity: 0;
}
.video-features > .elementlist > div:last-child .elementlist:before,
.video-features > .elementlist > div:last-child .elementlist:after{
content: '';
position: absolute;z-index: -1;
top: calc(var(--bg-top) - 1rem);
opacity: var(--bg-opacity);
transition: all .3s;
}
.video-features > .elementlist > div:last-child .elementlist:before{
left: 0;right: 0;
background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,51,153,0.1) 75%);
height: var(--bg-height);
}
.video-features > .elementlist > div:last-child .elementlist:after{
display: block;
border: calc(var(--bg-height) / 2) solid transparent;
border-right: calc(var(--bg-height) / 4) solid rgba(0,51,153,0.1);
border-left: 0;
left: calc((var(--bg-height) / 4)*-1) ;
}
}
}
@media (min-width: 992px){
.video-features iframe{
height: 550px;
}
}


/* Rules for IE */
_:-ms-fullscreen, .video-features > .elementlist > div{
flex: 0 0 47% !important;
}