#content, body[grid-style] #content {overflow:hidden!important;display:grid;grid-template-columns:calc(33%) 2fr;column-gap:1rem;padding:1rem}

#picker {
	display:grid;
	grid-template-rows:auto 1fr;
	height:100%;
	max-height:calc(100%);
	overflow-y:hidden;
	background-color:var(--backgroundColorTransparentDark);
	border:1px solid var(--borderColorDark)}
	#picker item {
		display:block;
		width:100%;
		background-image:url('/assets/mat-background-section.png');
		font-family:Cousine,monospace;
		font-size:0.8em;
		border-bottom:1px solid var(--borderColorDark);
		padding:1em}
		#picker item h3 {
			margin:0;
			max-width:calc(100%);
			display:block;
			white-space:nowrap;
			text-overflow:ellipsis;
			overflow:hidden}
	#picker-notice {
		display:block;
		width:100%;
		margin:auto;
		padding:1em;
		font-size:0.8em;
		text-align:center;
		border-bottom:1px solid var(--borderColorDark)}
	#picker-items {
		height:0;
		min-height:100%;
		overflow-y:auto}

#gallery {
	display:grid;
	grid-template-rows:auto 1fr;
	background-image:url('/assets/mat-background-section.png');
	border:1px solid var(--borderColorDark);
	height:0;
	min-height:100%}
	#gallery-title {
		padding:1em 0 0.75em 0;
		background-image:url('/assets/mat-background-section.png');
		background-blend-mode:overlay;
		background-color:#444;
		text-align:center;
		border-bottom:1px solid var(--borderColorDark)}
	#gallery-items {
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:max-content;
		gap:1em;
		height:max-content;
		height:100%;
		padding:1em;
		overflow-y:auto}
		#gallery-items img {
			align-self:center;
			display:block;
			margin:0 auto;
			max-width:100%;
			max-height:240px;
			box-shadow:0 0 2px #fff;
			cursor:pointer}
			#gallery-items img:hover {box-shadow:0 0 8px #fff}
			#gallery-items img:active {opacity:0.75}

@media only screen and (max-width:1279px) {
	#content, body[grid-style] #content {grid-template-columns:auto;grid-template-rows:1fr 2fr}
}