@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 );
	&[open]{
		z-index : 12;
		display : grid;
		place-items : center;
	}
	.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;
		img{
			height : calc( 35 * var( --remBase ) );
		}
	}
	.dialogContent{
		display : grid;
		align-items : center;
		width : 100%;
		height : 100dvh;
	}
	.splide{
		display : grid;
		width : 100%;
		height : 100%;
		font-size : 0;
	}
	.splide__arrow{
		position : absolute;
		top : 50%;
		display : grid;
		place-items : center;
		width : auto;
		height : calc( 60 * var( --remBase ) );
		aspect-ratio : 1;
		translate : 0 -50%;
		img{
			height : calc( 30 * var( --remBase ) );
		}
	}
	.splide__arrow--prev{
		left : 0;
	}
	.splide__arrow--next{
		right : 0;
	}
	.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 ) );
		}
		picture{
			width : 100%;
			height : 100%;
			overflow : hidden;
			text-align : center;
			img{
				width : 100%;
				height : 100%;
				object-fit : contain;
			}
		}
		p{
			font-size : calc( 14 * var( --remBase ) );
			line-height : 2;
			color : white;
			text-align : center;
		}
	}
	@media screen and ( width <= 768px ){
		.close{
			right : calc( var( --gutter ) * var( --viewportBase ) );
		}
		.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 ){
		.close{
			right : min( 113px , calc( 113 * var( --viewportBase ) ) );
		}
		.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 ){
		.dialogContent{
			padding-inline : calc( var( --gutter ) * var( --viewportBase ) );
		}
	}
	@media print , screen and ( width >= 1040px ){
		.dialogContent{
			padding-inline : 80px;
		}
	}
}