#content {
	display:grid;
	grid-template-columns:auto 1fr;
	& #events {
		display:grid;
		grid-template-rows:auto 1fr;
		width:40ch;
		max-width:50vw;
		background:var(--cBG);
		border-right:var(--border);
		& > h2 {
			margin:0;
			padding:0.5em;
			text-align:center;
			font-size:1rem;
			background:var(--cBG);
			border-bottom:var(--border)
		}
		& #events-list {
			height:0;
			min-height:100%;
			overflow:hidden auto;
			& > div {
				padding:0.5em;
				background:url("/assets/mat-bg-section.png");
				border-bottom:var(--border);
				cursor:pointer;
				&:hover {background:linear-gradient(0deg,#fff2,#fff2),url("/assets/mat-bg-section.png");text-decoration:underline}
				&:active {background:url("/assets/mat-bg-section.png");color:color-mix(in srgb,var(--cTEXT,#fff) 50%, #000 50%)}
				& > span {
					display:block;
					user-select:none;
					&:first-of-type {font-weight:bold}
					&:last-of-type {font-size:0.8em}
				}
				&.active {background:#fff;color:#000}
			}
		}
	}
	& #gallery {
		display:grid;
		grid-template-rows:auto 1fr;
		& > h2 {
			margin:0;
			padding:0.5em;
			text-align:center;
			font-size:1rem;
			background:var(--cBG);
			border-bottom:var(--border)
		}
		& #gallery-images {
			position:relative;
			display:grid;
			grid-template-columns:1fr 1fr;
			gap:20px;
			height:0;
			min-height:100%;
			padding:20px;
			overflow:hidden auto;
			&:has(gallery-loading) {overflow:hidden}
			& img {display:block}
			& .column {
				max-width:100%;
				& > img {
					margin:auto;
					margin-bottom:20px;
					width:100%;
					border:1px solid #000;
					box-shadow:0 0 4px #fff;
					cursor:pointer;
					&:last-of-type {margin-bottom:0}
					&:hover {filter:brightness(1.2)}
					&:active {filter:unset;opacity:0.8}
				}
			}
			& gallery-loading {
				z-index:16;
				position:absolute;
				display:block;
				align-content:center;
				width:100%;
				height:100%;
				background:url("/assets/mat-dither-25-mask.gif"),#0005;
				text-align:center;
				& > span {
					display:block;
					width:max-content;
					margin:auto;
					padding:1em;
					background:#000;}
			}
		}
	}
}

#modal-container {
	z-index:64;
	position:fixed;
	top:0;
	left:0;
	align-content:center;
	width:100vw;
	height:100vh;
	background:url("/assets/mat-dither-75-mask.gif"),#0007;
	pointer-events:none;
	opacity:0;
	transition:opacity 0.3s ease;
	&.active {
		pointer-events:initial;
		opacity:1;
	}
	& #modal {
		position:relative;
		display:grid;
		grid-template-rows:60vh auto;
		width:1300px;
		max-width:90vw;
		max-height:80vh;
		margin:auto;
		border:var(--border);
		& #modal-item-container {
			align-content:center;
			background:url("/assets/mat-dither-25-mask.gif"),#555;
			& #modal-item {
				display:block;
				max-width:90%;
				max-height:80%;
				margin:auto;
				box-shadow:0 0 2px #fff
			}
			& img#modal-item {cursor:pointer}
		}
		#modal-desc {
			max-height:7lh;
			padding:0 1em;
			text-align:center;
			background:var(--cBG);
			border-top:var(--border);
			overflow:hidden auto;
			&.disabled {display:none}
		}
		#modal-controls {
			background:url("/assets/mat-bg-section.png");
			border-top:var(--border)
		}
		#modal-next, #modal-prev {
			z-index:32;
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			padding:1rem;
			background:#0005;
			border:var(--border);
			cursor:pointer;
			&:hover {background:#6665}
			&:active {opacity:0.5}
			& svg {
				stroke:#fff;
				stroke-width:4;
				display:block
			}
			&.disabled {
				pointer-events:none;
				opacity:0.5
			}
		}
		#modal-next {left:0;border-left:unset}
		#modal-prev {right:0;border-right:unset}
		#modal-close {
			z-index:32;
			position:absolute;
			top:0;
			right:0;
			padding:1rem;
			background:#0005;
			border-left:var(--border);
			border-bottom:var(--border);
			cursor:pointer;
			&:hover {background:#6665}
			&:active {opacity:0.5}
			& svg {
				stroke:#fff;
				stroke-width:2;
				display:block
			}
		}
		#modal-metadata {
			z-index:16;
			position:absolute;
			top:0;
			left:0;
			width:max-content;
			padding:0.5em;
			font-size:0.8em;
			& > span {display:block}
			&.loading {
				width:100%;
				height:60vh;
				background:url("/assets/mat-dither-50-mask.gif"),#000a;
				align-content:center;
				text-align:center;
				font-size:1rem
			}
		}
	}
}

@media only screen and (width<=960px) {
	#content {
		grid-template-columns:1fr;
		grid-template-rows:20vh 1fr;
		& #events {width:100%;max-width:unset;border-right:unset;border-bottom:var(--border)}
	}
	#modal {width:100vw!important;max-width:unset!important;margin:unset!important}
	#modal-prev.disabled,#modal-next.disabled {pointer-events:initial!important}
}