body:has(.wpgal:popover-open){
	overflow: hidden; 
}
.wpgal-item{
	cursor: pointer; 
	padding: 0; 
	border: none; 
	background-color: transparent; 
}
.wpgal {
	--wpgal-t: var(--t-std, all 1s ease allow-discrete);
	box-sizing: border-box;
	interpolate-size: allow-keywords;
	padding: 0;
	justify-content: center;
	align-items: center;
	border: none;
	background-color: transparent;
	position: fixed;
	inset: 0;
	width: 100%; 
	height: 100%; 
	opacity: 0; 
	transition: var(--wpgal-t);
	
	
	&:popover-open{
		opacity: 1; 
		@starting-style{
			opacity: 0; 
		}
	}
	
	&::backdrop {
		transition: var(--wpgal-t);
		background-color: #0000;
		backdrop-filter: blur(0px);
	}

	&:popover-open::backdrop {
		background-color: #0006;
		backdrop-filter: blur(4px);
		@starting-style {
			background-color: #0000;
			backdrop-filter: blur(0px);
		}
	}
	
	&:popover-open .close,
	&:popover-open .wrapper{
		opacity: 1; 
		/*scale: 1;*/ 
		
		@starting-style{
			opacity: 0; 
			/*scale: 0;*/ 
		}
	}
	& *{
		box-sizing: border-box;
	}

	
	& .wrapper {
		width: 100%;
		height: 100%;
		/* background-color: red; */
		display:flex;
		justify-content: center;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* overflow: hidden; */
		max-height: 90vh;
		max-width: 90vw;
		opacity: 0; 
		transition: var(--wpgal-t);
	}
	& .stage {
		width: 100%;
		height: 100%;
		/* background-color: red; */
		display:flex;
		justify-content: center;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* overflow: hidden; */

		& iframe {
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 5px;
		}
		&  .imgwrapper {
			/* border: 2px solid red; */
			max-height: 100%;
			max-width: 100%;
			border-radius: 5px;
			overflow: hidden;
			
			& img{
				flex-grow: 0;
				width: auto;
				max-height: 100%;
				height:  auto;
				max-height: 100%;
				max-width:  100%; 
				object-fit: contain;
			}
		}
		& .title {
			padding: 0.25em; 
			text-align: center; 
			background-color: white;
			border-radius: 0.5em; 
			font-size:smaller; 
		}

		& video {
			max-height:100%;
			max-width: 100%;
			border-radius: 5px;
		}

	}


	& .next, 
	& .prev {
		position: absolute;
		right: 0;
		width: 3em;
		top: 5em;
		height: calc(100% - 10em);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: var(--wpgal-t);
		opacity: 0;
		overflow: hidden;
		border: none;
		background-color: transparent;
		
		
		
		
		&.dis {
			display: none; 
		}
		&:hover {
			opacity: 1;
		}
	}
	& .prev {
		border-bottom-right-radius: 1em; 
		border-top-right-radius: 1em; 
		right: auto;
		left: 0;
	}
	& .next {
		border-bottom-left-radius: 1em; 
		border-top-left-radius: 1em; 
	}
	
	& .close {
		background-color: #0003;
		position: absolute;
		top: 0;
		right: 0;
		width: 4em;
		height: 4em;
		cursor: pointer;
		opacity: 0.5;
		transition: var(--wpgal-t);
		border-bottom-left-radius: 1em;
		opacity: 0;
		transform-origin: top right;
		border: none;
	}
	
	& .close:hover {
		opacity: 1;
	}
	& .preview{
		position: absolute; 
		width: 0px; 
		height: 0px; 
		opacity: 0; 
		left: 0;
		top: 0; 
		z-index: -10;
	}
}


.wpgal .next:after, 
.wpgal .prev:after {
	content: "";
	border-left: 1em solid white;
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	z-index:1;
}

.wpgal .prev:after {
	border-right: 1em solid white;
	border-left: none;
}

.wpgal .next:before, 
.wpgal .prev:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #000000;
	opacity: 0.2;
}


.wpgal .close:hover:after {
	transform: translateX(50%) translateY(-50%) rotateZ(135deg);
}

.wpgal .close:hover:before {
	transform: translateX(50%) translateY(-50%) rotateZ(45deg);
}

.wpgal .close:after, .wpgal .close:before {
	content: "";
	background-color: white;
	position: absolute;
	top: 50%;
	right: 50%;
	width: 2em;
	height: 0.25em;
	border-radius: 0.1em;
	transform: translateX(50%) translateY(-50%) rotateZ(45deg);
	transition: var(--wpgal-t);
}

.wpgal .close:before {
	transform: translateX(50%) translateY(-50%) rotateZ(-45deg);
}


@media(max-width: 992px){
    .wpgal .next, .wpgal .prev {
    	opacity: 1;
    }
    .wpgal {
		padding: 1em;
    }
	.wpgal .close {
		width: 3em;
		height: 3em;
	}
}
@media(max-width: 992px) AND (orientation: portrait){
    .wpgal .next, .wpgal .prev {
    	opacity: 1;
    }
    .wpgal .next,
    .wpgal .prev {
        height: 3em; 
        left: calc(50% + 1em); 
        border-radius: 0.5em; 
        bottom: 1em;
        top: auto;
    }
    .wpgal .prev {
        left: auto; 
        right: calc(50% + 1em); 
    }

}