@charset "UTF-8";

/* --------------------------------------------
WORKS
--------------------------------------------- */
body:has( #dialog[open] ){
	overflow : hidden;
}
#dialog{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100dvh;
	overflow : hidden;
	background-color : color-mix( in sRGB , black 90% , transparent );
}
#dialog[open]{
	z-index : 12;
	display : grid;
	place-items : center;
}
#dialog .close{
	position : absolute;
	top : calc( 87 * var( --remBase ) );
	z-index : 1;
	display : grid;
	place-items : center;
	width : auto;
	height : calc( 60 * var( --remBase ) );
	aspect-ratio : 1;
}
#dialog .close img{
	height : calc( 35 * var( --remBase ) );
}
#dialog .dialogContent{
	display : grid;
	align-items : center;
	width : 100%;
	height : 100dvh;
}
#dialog .splide{
	display : grid;
	width : 100%;
	height : 100%;
	font-size : 0;
}
#dialog .splide__arrow{
	position : absolute;
	top : 50%;
	display : grid;
	place-items : center;
	width : auto;
	height : calc( 60 * var( --remBase ) );
	aspect-ratio : 1;
	translate : 0 -50%;
}
#dialog .splide__arrow img{
	height : calc( 30 * var( --remBase ) );
}
#dialog .splide__arrow--prev{
	left : 0;
}
#dialog .splide__arrow--next{
	right : 0;
}
#dialog .splide__slide > div{
	display : grid;
	grid-template-rows : auto auto;
	grid-template-columns : 1fr;
	row-gap : calc( 30 * var( --remBase ) );
	align-content : center;
	align-items : center;
	justify-content : center;
	height : 100%;
	padding-block : calc( 40 * var( --remBase ) );
}
#dialog .splide__slide picture{
	width : 100%;
	height : 100%;
	overflow : hidden;
	text-align : center;
}
#dialog .splide__slide picture img{
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#dialog .splide__slide p{
	font-size : calc( 14 * var( --remBase ) );
	line-height : 2;
	color : white;
	text-align : center;
}
@media screen and ( width < 768px ){
	#dialog .close{
		right : calc( var( --gutter ) * var( --viewportBase ) );
	}
	#dialog .splide{
		grid-template-columns : calc( 60 * var( --viewportBase ) ) 1fr calc( 60 * var( --viewportBase ) );
		column-gap : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width > 768px ){
	#dialog .close{
		right : min( 113px , calc( 113 * var( --viewportBase ) ) );
	}
	#dialog .splide{
		grid-template-columns : calc( 60 * 100% / 1760 ) 1fr calc( 60 * 100% / 1760 );
		column-gap : calc( 40 * 100% / 1760 );
	}
}
@media screen and ( 768px <= width < 1040px ){
	#dialog .dialogContent{
		padding-inline : calc( var( --gutter ) * var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1040px ){
	#dialog .dialogContent{
		padding-inline : 80px;
	}
}