.demoPage {
	padding: 5vw;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.demoGrid {
	display: flex;
	column-gap: 2.5%;
	row-gap: 40px;
	flex-wrap: wrap;
	align-items: flex-start;
	.gridItem {
		flex: 0 0 22.5%;
		min-width: 320px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		
	}
	&.md-stack {
		flex-direction: column;
	}
}


.demoPanel-trigger {
	position: fixed;
	z-index: 498;
	bottom: 0;
	right: 0;
	width: 32px;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
}

.demoPanel-backdrop {
	position: fixed;
	z-index: 499;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(128,128,128,0.25);
	cursor: pointer;
	display: none;
	&.md-show {
		display: block;
	}
}

.demoPanel-panel {
	z-index: 500;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: white;
	display: none;
	padding-block: 20px;
	gap: 10px;
	flex-direction: column;
	.panel-section {
		gap: 5px;
		display: flex;
		flex-direction: column;
		.section-title {
			font-size: 18px;
			padding: 5px 20px;
		}
		.section-links {
			display: flex;
			flex-direction: column;
			font-size: 16px;
			a:link,
			a:visited {
				padding: 5px 20px;
				min-width: 200px;
				line-height: 1.0;
				&:hover {
					background-color: #eee;
				}
			}
		}
	}
	&.md-show {
		display: flex;
	}
}