.lancette-video {
	max-width: 1168px;
	margin-left: auto;
	margin-right: auto;
	.lancette-video__preview {
		position: relative;
		border-radius: 40px;
		overflow: hidden;
		@media (max-width:1023.98px) {
			border-radius: 20px;
		}
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background-color: #000;
			opacity: 0.6;
			transition: opacity 0.3s;
			z-index: 2;
		}
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			margin: auto;
			width: 88px;
			height: 88px;
			z-index: 8;
			border-radius: 100%;
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
			background-color: var(--40-opacity-dark);
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' d='M18.61 10.934c-1.997-1.27-4.61.164-4.61 2.531v20.57c0 2.367 2.613 3.802 4.61 2.531l16.163-10.285c1.852-1.179 1.852-3.883 0-5.062z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 48px;
	}
	}
	.lancette-video__preview:hover::before {
		opacity: 0.3;
	}
	img {
		width: 100%;
		height: auto;
		vertical-align: top;
		aspect-ratio: 16/9;
		object-fit: cover;
	}
}

.modal.modal-lancette-video {
	--modal-width: Min(1400px, 80%);
	.modal-content {
		border-radius: 0;
		border: 0;
	}
	.modal-body {
		padding: 0;
		border: 0;
	}
	.video-js {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
	}
}