<div class="padding-y-md">
	<div class="container max-width-sm">
		<div class="margin-bottom-md">
			<h1 class="text-lg margin-bottom-sm">Light theme</h1>

			<div class="padding-lg radius-lg bg-darker">
				<div class="padding-lg radius-lg shadow-sm bg-dark">
					<div class="padding-lg radius-lg shadow-md bg">
						<div class="grid gap-xs padding-bottom-sm">
							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-darker">
								<span class="cd-demo-font text-xs">Bg Darker</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-dark">
								<span class="cd-demo-font text-xs">Bg Dark</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-light">
								<span class="cd-demo-font text-xs">Bg Light</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-lighter">
								<span class="cd-demo-font text-xs">Bg Lighter</span>
							</div>
						</div>

						<div class="margin-bottom-sm">
							<div class="text-sm">
								<div class="grid gap-xxxs">
									<div class="flex items-center">
										<p class="color-contrast-lower margin-right-sm">Color Contrast Lower</p>
										<div class="bg-contrast-lower flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-low margin-right-sm">Color Contrast Low</p>
										<div class="bg-contrast-low flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-medium margin-right-sm">Color Contrast Medium</p>
										<div class="bg-contrast-medium flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-high margin-right-sm">Color Contrast High</p>
										<div class="bg-contrast-high flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-higher margin-right-sm">Color Contrast Higher</p>
										<div class="bg-contrast-higher flex-grow" style="height: 1px;"></div>
									</div>
								</div>
							</div>
						</div>

						<div class="padding-lg radius-lg shadow-lg bg-light">
							<div class="padding-lg radius-lg shadow-xl bg-lighter" style="padding-bottom: 50%;">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="margin-bottom-md">
			<h1 class="text-lg margin-bottom-sm">Dark theme</h1>

			<div class="padding-lg radius-lg bg-darker" data-theme="dark">
				<div class="padding-lg radius-lg shadow-sm bg-dark">
					<div class="padding-lg radius-lg shadow-md bg">
						<div class="grid gap-xs padding-bottom-sm">
							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-darker">
								<span class="cd-demo-font text-xs">Bg Darker</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-dark">
								<span class="cd-demo-font text-xs">Bg Dark</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-light">
								<span class="cd-demo-font text-xs">Bg Light</span>
							</div>

							<div class="flex flex-center col-6 [email protected] height-md radius-md bg-lighter">
								<span class="cd-demo-font text-xs">Bg Lighter</span>
							</div>
						</div>

						<div class="margin-bottom-sm">
							<div class="text-sm">
								<div class="grid gap-xxxs">
									<div class="flex items-center">
										<p class="color-contrast-lower margin-right-sm">Color Contrast Lower</p>
										<div class="bg-contrast-lower flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-low margin-right-sm">Color Contrast Low</p>
										<div class="bg-contrast-low flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-medium margin-right-sm">Color Contrast Medium</p>
										<div class="bg-contrast-medium flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-high margin-right-sm">Color Contrast High</p>
										<div class="bg-contrast-high flex-grow" style="height: 1px;"></div>
									</div>

									<div class="flex items-center">
										<p class="color-contrast-higher margin-right-sm">Color Contrast Higher</p>
										<div class="bg-contrast-higher flex-grow" style="height: 1px;"></div>
									</div>
								</div>
							</div>
						</div>

						<div class="padding-lg radius-lg shadow-lg bg-light">
							<div class="padding-lg radius-lg shadow-xl bg-lighter" style="padding-bottom: 50%;">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>