@charset "utf-8";

/* DEMO
============================== */
#demo{
	width: 100vw;
	height: fit-content;
	height: -moz-fit-content;
	padding: var(--bh200) 0 var(--mxl);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: min-content;
	background-color: #f0f0f0;
}
#demo form{
	padding: 0 var(--ms);
	grid-column: 2 / 12;
}
#demo wrap{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
}
#demo form div{
	width: calc(100% - var(--ms));
	grid-template-columns: 1fr;
	border-color: #b2bdba;
}
@media (max-width: 834px){
	#demo{
		padding-bottom: calc(var(--ms)*2);
		grid-template-columns: 1fr;
	}
	#demo form{
		grid-column: 1 / -1;
	}
}
@media (max-width: 600px){
	#demo wrap{
		grid-template-columns: 1fr min-content;
	}
}