/* Wrapper for abstract patterns like colors and typography */
.preview-canvas {
	max-width: 42rem;
	margin: 0 auto;
	padding: 3rem;
}

/* Color palette to demonstrate colors */
.palette {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	
	margin-bottom: 0.5rem;
}

.palette__color {
	width: 5.3rem;
	margin-right: 0.3rem;
	margin-bottom: 0.3rem;
	padding: 0.25rem;
	
	border: 1px solid #ddd;
	background: white;
}

.palette__swatch {
	width: 100%;
	padding-bottom: 100%; /* Make the element square */
	margin-bottom: 0.4rem;
}

.palette__label {
	font-size: 0.7rem;
	text-align: center;
}