.modal-video-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	background-color: rgba($color-black-300, 0.8);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 9999;

	&:not(.visible) {
		opacity: 0;
		visibility: hidden;

		.modal-video {
			opacity: 0;
			transform: translateY(100px);
		}
	}
}

.modal-video {
	display: flex;
	width: 100%;
	height: auto;
	max-width: 1024px;
	margin: auto;
	aspect-ratio: 16 / 9;
	border-radius: 3.2px;
	background-color: white;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.modal-video__close-btn {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 40px;
	height: 40px;
	color: white;

	svg {
		width: 100%;
		height: 100%;
	}
}

.modal-video__play-btn {
	cursor: pointer;
	margin: auto;
	color: $color-black-100;
}