/*
Pattern Name:         content-media
Version:            1.0
*/

.content-media figure{
	font-size:0px;
}
.content-media video{
	border-radius: 0px!important;
	aspect-ratio: 16/9;
}

.content-media .components-resizable-box__container{
	margin: auto;
}

.content-media .components-resizable-box__container img{
	margin: auto;
}

.content-media figure.wp-block-video{
	position: relative;
	cursor: pointer;
}

.content-media figure.wp-block-embed-youtube .wp-block-embed__wrapper{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 100%/16*9 = 56.25% */
    height: 0;
}

.content-media figure.wp-block-embed-youtube .wp-block-embed__wrapper iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border-radius: 0px!important;
}

.content-media figure.wp-block-video::before {
	content: "";
	background-image: url(../../../inc/block-patterns/assets/images/player.png);
	background-size: 80px 80px;
	display: inline-block;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 80px;
	height: 80px;
	min-height: auto;
	z-index: 2;
	pointer-events: none;
	transition: all 0.2s;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 100%;
	cursor: pointer;
}
.content-media figure.wp-block-video:hover::before {
	transition: all 0.2s;
	transform: translate(-50%, -50%) scale(1.1);
	background-color: var(--wp--preset--color--red)!important;
}
.content-media figure.wp-block-video::after {
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	position: absolute;
	min-height: auto;
	z-index: 1;
	pointer-events: none;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.27) 64.58%, rgba(0, 0, 0, 0.27) 100%);
	border-radius: 0px;
}
.content-media figure.wp-block-video.paused::before, .content-media figure.wp-block-video.paused::after {
	z-index: -1;
}

@media screen and (min-width: 0px) and (max-width: 500px) {
	.content-media h2{font-size: 30px!important;}
}