.ylv-lazy-video {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	border-radius: 24px;
	overflow: hidden;
	cursor: pointer;
}

.home .ylv-lazy-video {
	border-radius: 0;
}

.ylv-lazy-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 19, 19, 0.4);
    z-index: 9;
}

.ylv-lazy-video:hover::before {
	background: rgba(20, 19, 19, 0.6);
}

.ylv-lazy-video.is-loaded::before {
	content: '';
	display: none;
}

.ylv-lazy-video__image,
.ylv-lazy-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.ylv-lazy-video__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.35s ease, opacity 0.25s ease;
}

.ylv-lazy-video:hover .ylv-lazy-video__image {
	transform: scale(1.04);
}

.ylv-lazy-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 99;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 32px;
	padding: 0;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.ylv-lazy-video__play-icon {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.ylv-lazy-video__play-icon--hover {
	position: absolute;
	opacity: 0;
}

.ylv-lazy-video[data-trigger="click"]:hover .ylv-lazy-video__play-icon--default {
	opacity: 0;
}

.ylv-lazy-video[data-trigger="click"]:hover .ylv-lazy-video__play-icon--hover {
	opacity: 1;
}

.ylv-lazy-video:hover .ylv-lazy-video__play {
	transform: translate(-50%, -50%);
}

.ylv-lazy-video.is-loaded {
	cursor: default;
}

.ylv-lazy-video.is-loaded .ylv-lazy-video__play,
.ylv-lazy-video.is-loaded .ylv-lazy-video__image {
	display: none;
}

/**
 * Hide play icon on desktop hover mode.
 * JS still falls back to click on mobile/touch devices.
 */
.ylv-lazy-video[data-trigger="hover"] .ylv-lazy-video__play {
	display: none;
}

.ylv-video-is-loaded .ylv-hide-on-video-load {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
	.ylv-lazy-video[data-trigger="hover"] .ylv-lazy-video__play {
		display: inline-flex;
	}
}

@media screen and (max-width: 767px) {
	.ylv-lazy-video {
		min-height: 180px;
		border-radius: 0;
	}

	.ylv-lazy-video__play {
		top: 40%;
		width: 46px;
		height: 32px;
	}

	.ylv-lazy-video__play img {
		width: 46px;
		height: 32px;
	}
}