/**
 * Inhaltsverzeichnis
 * 	1. Wrapper 
 * 
 */


@import url('../../inc/css/slick.css');
/* ================================================== */
/* 1. Wrapper */
/* -------------------------------------------------- */


/* ================================================== */
/* 2. Screen */
/* -------------------------------------------------- */
[data-gallery-element="screen"]:not(:last-child) {
	margin-bottom: var(--cvh-space-xs);
}


[data-gallery-element="screen"] .cvh--gallery-container {
	--obj-height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.cvh--gallery-container[data-file-type="video"] {
	aspect-ratio: 16/9;
}

@media (orientation: landscape) {
	[data-gallery-element="screen"] .cvh--gallery-container {
		aspect-ratio: 16/9;
	}
}


/* ================================================== */
/* 3. Preview */
/* -------------------------------------------------- */
[data-gallery-element="preview"] {
	position: relative;
	z-index: 25;
}

[data-gallery-element="preview"] .slick-slide {
	cursor: pointer;
}

[data-gallery-element="preview"] .cvh--gallery-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	aspect-ratio: 6/4;
	padding: calc(var(--cvh-space-s) / 2);
}

[data-gallery-element="preview"] .cvh--gallery-container > .cvh--image-ctn {
	height: 100%;
	width: 100%;
}


/* ================================================== */
/* 4. Arrows */
/* -------------------------------------------------- */
.cvh--gallery-wrap .slick-arrow {
	--opacity: 0.25;
}


/* ================================================== */
/* 5. Elements */
/* -------------------------------------------------- */
/* #=#=#=#=#=# 5.1 Video Embedding #=#=#=#=#=# */
.cvh--video-ctn {
	height: 100%;
	width: 100%;
}