.module-media .component-wrapper {
    position: relative;
	z-index: 3;
}

.module-media .component-wrapper {
    position: relative;
    display: block;
    width: 100%;
	height: fit-content;
    background-color: var(--softGrey);
	z-index: 3;
    padding-bottom: 10.41vw;
    transition: background .4s ease;
	-webkit-transition: background .4s ease;
	-moz-transition: background .4s ease;
	-o-transition: background .4s ease;
}

body.dark .module-media .component-wrapper {
    background-color: var(--black);
}

.module-media .component-wrapper video {
    position: relative;
    display: block;
    width: 100%;
	height: auto;
}

.module-media .component-wrapper .lg {
        display: block;
        width: 100%;
        height: 100%;
}

.module-media .component-wrapper .sm {
    display: none;
}



@media only screen and (max-width: 1024px) {
    .module-media .component-wrapper video {
        height: 80vw;
        object-fit: cover;
        object-position: center center;
    }
}


@media only screen and (max-width: 900px) {
    .module-media .component-wrapper video {
        height: 100vh;
        object-fit: cover;
        object-position: center center;
    }
}


@media only screen and (max-width: 740px) {
    .module-media .component-wrapper {
	    /*height: calc( var(--vh, 1vh) * 100 );*/
        height: fit-content;
    }

    /*
    .module-media .component-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    */

    .module-media .component-wrapper .lg {
        display: none;
    }

    .module-media .component-wrapper .sm {
        display: block;
        width: 100%;
        height: 100%;
    }
}


@media only screen and (max-width: 550px) {
    .module-media .component-wrapper {
	    /* height: 150.38vw; */
        height: 180.3vw;
    }

    .module-media .component-wrapper video {
        width: 100%;
        height: 100%;
        /*object-fit: contain;*/
    } 
}