/* pic-gallery */

.pic-gallery{
	display:flex;
	align-items:flex-start;
	width:100%;
	position: relative;
}
.pic-gallery .overlay{
	position: absolute;
	inset: 0 62% 0 0;
	background: 
		linear-gradient(90deg, rgb(var(--n)/1) 0%, rgb(var(--c1)/.9) 100%),
		url("/assets/img/bg.webp");
	background-repeat: repeat, repeat;
	background-size: auto, auto;
	background-position: center, center;
	background-blend-mode: multiply, normal;
	z-index: 0;
}

.pic-gallery > article:nth-of-type(1){
	width:64%;
	min-width:0;
	padding:3rem 3rem 3rem 18rem;
}

.pic-gallery > article:nth-of-type(2){
	position:sticky;
	top:12dvh;
	width:36%;
	min-width:0;
	padding:0 18rem 0 0;
}

.pic-gallery > article:nth-of-type(2) .artxt{
	width: 100%;
}


.pic-gallery .gallery-cols{
	width:100%;
	margin:0;
	padding:1rem;
	list-style:none;
}

.pic-gallery .gallery-cols > li{
	position:relative;
	width:100%;
	min-width:0;
	margin:0;
	padding:0;
	overflow:hidden;
}

.pic-gallery .gallery-cols figure{
	position:relative;
	width:100%;
	height:100%;
	margin:0;
	overflow:hidden;
	cursor:pointer;
	background:rgb(var(--n) / 1);
}

.pic-gallery .gallery-cols img,
.pic-gallery .gallery-cols video,
.pic-gallery .gallery-cols .gallery-thumb,
.pic-gallery .gallery-cols .responsive-img,
.pic-gallery .gallery-cols .responsive-video{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.pic-gallery .gallery-cols img:hover,
.pic-gallery .gallery-cols video:hover{
	filter:saturate(.5);
}

.pic-gallery .gallery-cols dl{
	display:none;
}

.pic-gallery .gallery-cols figcaption{
display: none
}

.pic-gallery .gallery-video-mark{
	position:absolute;
	left:50%;
	top:50%;
	z-index:3;
	width:3.25rem;
	height:3.25rem;
	border-radius:50%;
	transform:translate(-50%, -50%);
	pointer-events:none;
}

.pic-gallery .gallery-video-mark::before{
	content:"";
	position:absolute;
	left:54%;
	top:50%;
	width:0;
	height:0;
	border-top:.65rem solid transparent;
	border-bottom:.65rem solid transparent;
	border-left:1rem solid rgb(var(--b) / 1);
	transform:translate(-50%, -50%);
}

/* square grid */

.pic-gallery.square-grid .gallery-cols{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:.5rem;
}

.pic-gallery.square-grid .gallery-cols figure{
	aspect-ratio:1 / 1;
}

/* mosaic grid */

.pic-gallery.mosaic-grid .gallery-cols{
	--cols:3;
	--gap:10px;
	--cell:10rem;

	display:grid;
	grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
	grid-auto-rows:var(--cell);
	grid-auto-flow:dense;
	gap:var(--gap);
}

.pic-gallery.mosaic-grid .gallery-cols > li{
	width:auto;
	min-height:0;
	grid-column:span 1;
	grid-row:span 1;
}

.pic-gallery.mosaic-grid .gallery-cols > li.size-1x1{
	grid-column:span 1;
	grid-row:span 1;
}

.pic-gallery.mosaic-grid .gallery-cols > li.size-1x2{
	grid-column:span 1;
	grid-row:span 2;
}

.pic-gallery.mosaic-grid .gallery-cols > li.size-2x1{
	grid-column:span 2;
	grid-row:span 1;
}

.pic-gallery.mosaic-grid .gallery-cols > li.size-2x2{
	grid-column:span 2;
	grid-row:span 2;
}

/* pinterest grid */

.pic-gallery.pinterest-grid .gallery-cols{
	display:block;
	columns:4;
	column-gap:1rem;
	margin:0;
	padding:1rem;
	list-style:none;
}

.pic-gallery.pinterest-grid .gallery-cols > li{
	display:block;
	width:100%;
	margin:0 0 1rem;
	break-inside:avoid;
	-webkit-column-break-inside:avoid;
	overflow:hidden;
}

.pic-gallery.pinterest-grid .gallery-cols figure{
	position:relative;
	width:100%;
	height:auto;
	margin:0;
	overflow:hidden;
	cursor:pointer;
	background:rgb(var(--n) / 1);
}

.pic-gallery.pinterest-grid .gallery-cols > li.ratio-1x1 figure{
	aspect-ratio:1 / 1;
}

.pic-gallery.pinterest-grid .gallery-cols > li.ratio-2x3 figure{
	aspect-ratio:2 / 3;
}

.pic-gallery.pinterest-grid .gallery-cols > li.ratio-3x2 figure{
	aspect-ratio:3 / 2;
}

.pic-gallery.pinterest-grid .gallery-cols img,
.pic-gallery.pinterest-grid .gallery-cols video,
.pic-gallery.pinterest-grid .gallery-cols .gallery-thumb,
.pic-gallery.pinterest-grid .gallery-cols .responsive-img,
.pic-gallery.pinterest-grid .gallery-cols .responsive-video{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

/* zoom */

.zoom{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background-image: linear-gradient(110deg, #000 55%, rgb(var(--c1)/.95) 100%),
	url("/assets/img/bg.webp");
	background-repeat: repeat;
	background-size: auto;
	background-attachment: fixed;
	background-position: center;
	background-blend-mode: multiply;
	opacity:0;
	pointer-events:none;
	transition:opacity .25s ease;
	z-index:350;
}

.zoom.open{
	opacity:1;
	pointer-events:auto;
}

.zoom img,
.zoom video,
.zoom .zoom-img,
.zoom .zoom-video{
	display:block;
	max-width:90vw;
	max-height:90vh;
	object-fit:contain;
	background:#000;
	box-shadow:0 0 30px rgba(0, 0, 0, .45);
}

.zoom .zoom-img,
.zoom .zoom-video{
	display:none;
}

.zoom-close,
.zoom-prev,
.zoom-next{
	position:absolute;
	padding:.5rem;
	font-size:2.5rem;
	line-height:1;
	color:#fff;
	cursor:pointer;
	border:none;
	background:none;
	z-index:2;
}

.zoom-close{
	top:1rem;
	right:1rem;
}

.zoom-prev{
	top:50%;
	left:1rem;
	transform:translateY(-50%);
}

.zoom-next{
	top:50%;
	right:1rem;
	transform:translateY(-50%);
}

.zoom-count{
	position:absolute;
	left:50%;
	bottom:1rem;
	font-size:.9rem;
	letter-spacing:.08em;
	color:#f00;
	transform:translateX(-50%);
	z-index:2;
}

@media (max-width: 767px) {
	.pic-gallery {
		flex-direction: column-reverse;
		width: 100%;
		max-width: 100vw;
		overflow: hidden;
		position: absolute;
		margin-top: 1100dvh;
	}
	
	.pic-gallery .overlay {
		position: absolute;
		inset: 0;
		background: 
			linear-gradient(90deg, rgb(var(--n)/1) 0%, rgb(var(--c3)/.9) 100%),
			url("/assets/img/bg.webp");
		background-repeat: repeat, repeat;
		background-size: auto, auto;
		background-position: center, center;
		background-blend-mode: multiply, normal;
		z-index: 0;
	}

	.pic-gallery > article:nth-of-type(1) {
		width: 100%;
		padding: 0;
		box-sizing: border-box;
	}
	
	.pic-gallery > article:nth-of-type(1) figcaption {
		display: none;
	}

	.pic-gallery > article:nth-of-type(2) {
		position: relative;
		top: 0;
		width: 100%;
		padding: 0 1.25rem;
		box-sizing: border-box;
	}

	.pic-gallery.square-grid .gallery-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		box-sizing: border-box;
	}

	.pic-gallery.mosaic-grid .gallery-cols {
		--cols: 4;
		box-sizing: border-box;
	}

	.pic-gallery.pinterest-grid .gallery-cols {
		columns: 2;
		column-gap: .25rem;
		padding: 1.25rem 0;
		box-sizing: border-box;
	}

	.pic-gallery.pinterest-grid .gallery-cols > li {
		margin-bottom: .25rem;
		break-inside: avoid;
	}
}