.modal,
.modal__forms{
	position:fixed;
	z-index:var(--z-index-overlay,15);
	width:100%;
	height:100%;
	left:0;
	top:0;
	opacity:0;
	visibility:hidden
}
.modal:not(.modal--is-visible){
	pointer-events:none;
	background-color:transparent
}
.modal--is-visible{
	opacity:1;
	visibility:visible
}
.modal__close-btn{
	display:flex;
	flex-shrink:0;
	border-radius:50%;
	transition:.2s
}
.modal__close-btn .icon{
	display:block;
	margin:auto
}
.modal__close-btn--outer{
	--size:48px;
	width:var(--size);
	height:var(--size);
	position:fixed;
	top:var(--space-sm);
	right:var(--space-sm);
	z-index:var(--z-index-fixed-element,10);
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0.9);
	transition:.2s
}
.modal__close-btn--outer .icon{
	color:var(--color-white);
	transition:-webkit-transform .3s var(--ease-out-back);
	transition:transform .3s var(--ease-out-back);
	transition:transform .3s var(--ease-out-back),-webkit-transform .3s var(--ease-out-back)
}
.modal__close-btn--outer:hover{
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),1)
}
.modal__close-btn--outer:hover .icon{
	-webkit-transform:scale(1.1);
	transform:scale(1.1)
}
.modal__close-btn--inner{
	--size:32px;
	width:var(--size);
	height:var(--size);
	/*background-color:var(--color-bg-light);*/
	border-color: #fff0;
	box-shadow:var(--inner-glow),var(--shadow-sm);
	transition:.2s
}
.modal__close-btn--inner .icon{
	color:inherit
}
.modal__close-btn--inner:hover{
	background-color:var(--color-bg-lighter);
	box-shadow:var(--inner-glow),var(--shadow-md)
}
:root{
	--modal-transition-duration:0.2s
	/* fallback (i.e., unless specified differently in the variations 👇) */
}
@media(prefers-reduced-motion:no-preference){
	.modal--animate-fade{
		--modal-transition-duration:0.2s;
		transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
	}
	.modal--animate-fade.modal--is-visible{
		transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
	}
	.modal--animate-scale,.modal--animate-translate-up,.modal--animate-translate-down,.modal--animate-translate-right,.modal--animate-translate-left{
		--modal-transition-duration:0.2s;
		transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
	}
	.modal--animate-scale .modal__content,.modal--animate-translate-up .modal__content,.modal--animate-translate-down .modal__content,.modal--animate-translate-right .modal__content,.modal--animate-translate-left .modal__content{
		will-change:transform;
		transition:-webkit-transform var(--modal-transition-duration) var(--ease-out);
		transition:transform var(--modal-transition-duration) var(--ease-out);
		transition:transform var(--modal-transition-duration) var(--ease-out),-webkit-transform var(--modal-transition-duration) var(--ease-out)
	}
	.modal--animate-scale.modal--is-visible,.modal--animate-translate-up.modal--is-visible,.modal--animate-translate-down.modal--is-visible,.modal--animate-translate-right.modal--is-visible,.modal--animate-translate-left.modal--is-visible{
		transition:opacity var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s
	}
	.modal--animate-scale.modal--is-visible .modal__content,.modal--animate-translate-up.modal--is-visible .modal__content,.modal--animate-translate-down.modal--is-visible .modal__content,.modal--animate-translate-right.modal--is-visible .modal__content,.modal--animate-translate-left.modal--is-visible .modal__content{
		-webkit-transform:scale(1);
		transform:scale(1)
	}
	.modal--animate-slide-up,.modal--animate-slide-down,.modal--animate-slide-right,.modal--animate-slide-left{
		--modal-transition-duration:0.3s;
		transition:opacity 0s var(--modal-transition-duration),background-color var(--modal-transition-duration),visibility 0s var(--modal-transition-duration)
	}
	.modal--animate-slide-up .modal__content,.modal--animate-slide-down .modal__content,.modal--animate-slide-right .modal__content,.modal--animate-slide-left .modal__content{
		will-change:transform;
		transition:-webkit-transform var(--modal-transition-duration) var(--ease-out);
		transition:transform var(--modal-transition-duration) var(--ease-out);
		transition:transform var(--modal-transition-duration) var(--ease-out),-webkit-transform var(--modal-transition-duration) var(--ease-out)
	}
	.modal--animate-slide-up.modal--is-visible,.modal--animate-slide-down.modal--is-visible,.modal--animate-slide-right.modal--is-visible,.modal--animate-slide-left.modal--is-visible{
		transition:background-color var(--modal-transition-duration),visibility 0s
	}
	.modal--animate-slide-up.modal--is-visible .modal__content,.modal--animate-slide-down.modal--is-visible .modal__content,.modal--animate-slide-right.modal--is-visible .modal__content,.modal--animate-slide-left.modal--is-visible .modal__content{
		-webkit-transform:scale(1);
		transform:scale(1)
	}
	.modal--animate-scale .modal__content{
		-webkit-transform:scale(.95);
		transform:scale(.95)
	}
	.modal--animate-translate-up .modal__content{
		-webkit-transform:translateY(40px);
		transform:translateY(40px)
	}
	.modal--animate-translate-down .modal__content{
		-webkit-transform:translateY(-40px);
		transform:translateY(-40px)
	}
	.modal--animate-translate-right .modal__content{
		-webkit-transform:translateX(-40px);
		transform:translateX(-40px)
	}
	.modal--animate-translate-left .modal__content{
		-webkit-transform:translateX(40px);
		transform:translateX(40px)
	}
	.modal--animate-slide-up .modal__content{
		-webkit-transform:translateY(100%);
		transform:translateY(100%)
	}
	.modal--animate-slide-down .modal__content{
		-webkit-transform:translateY(-100%);
		transform:translateY(-100%)
	}
	.modal--animate-slide-right .modal__content{
		-webkit-transform:translateX(-100%);
		transform:translateX(-100%)
	}
	.modal--animate-slide-left .modal__content{
		-webkit-transform:translateX(100%);
		transform:translateX(100%)
	}
}
.modal--is-loading .modal__content{
	visibility:hidden
}
.modal--is-loading .modal__loader{
	display:flex
}
.modal__loader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	display:none;
	pointer-events:none
}
.modal-img-btn{
	position:relative;
	cursor:pointer
}
.modal-img-btn::after{
	content:"";
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0);
	transition:background .2s
}
.modal-img-btn:hover::after{
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0.7)
}
.modal-img-btn:hover .modal-img-btn__icon-wrapper{
	opacity:1
}
.modal-img-btn__icon-wrapper{
	position:absolute;
	z-index:2;
	top:calc(50% - 24px);
	left:calc(50% - 24px);
	width:48px;
	height:48px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0.7);
	opacity:0;
	transition:opacity .2s
}
.modal-img-btn__icon-wrapper .icon{
	color:var(--color-white)
}






.video-card__modal-control{
	display:block;
	color:inherit;
	text-decoration:none;
	position:relative;
}
.video-card__modal-control:hover .video-card__preview{
	-webkit-filter:contrast(110%);
	filter:contrast(110%);
	box-shadow:var(--shadow-md)
}
.video-card__modal-control:hover .video-card__play-btn::before{
	-webkit-transform:scale(1.2);
	transform:scale(1.2)
}
.video-card__preview{
	display:block;
	width:100%;
	aspect-ratio:4/3;
	-o-object-fit:cover;
	object-fit:cover;
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-sm);
	transition:box-shadow .3s,-webkit-filter .3s;
	transition:filter .3s,box-shadow .3s;
	transition:filter .3s,box-shadow .3s,-webkit-filter .3s
}
.video-card__play-btn{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-white)
}
.video-card__play-btn .icon{
	position:relative;
	z-index:1
}
.video-card__play-btn::before{
	content:"";
	position:absolute;
	width:60px;
	height:60px;
	top:calc(50% - 30px);
	left:calc(50% - 30px);
	background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),0.8);
	border-radius:50%;
	transition:-webkit-transform .3s var(--ease-out-back);
	transition:transform .3s var(--ease-out-back);
	transition:transform .3s var(--ease-out-back),-webkit-transform .3s var(--ease-out-back)
}