body {
	font-family: "Noto Sans", sans-serif;
}

.area {
	display: grid;
	grid-gap: 1em;
}
	@media screen and (min-width: 800px) {
		.area { grid-template-columns: repeat( 2, 1fr ); }
	}
	@media screen and (min-width: 1200px) {
		.area { grid-template-columns: repeat( 3, 1fr ); }
	}

.item {
	padding: 1em;
	background-color: rgba( 0, 0, 0, 0.1 );
	text-align: center;
}
	.item h3 {
		margin: 0;
		text-align: center;
	}
	.item h4 {
		margin: 0;
		text-align: center;
		font-size: 75%;
	}
	.subitems {
		display: flex;
		margin: 0.5em 0;
	}
	.subitem {
		padding: 0.5em;
		flex: 1;
		background-color: rgba( 0, 0, 0, 0.1 );
		margin-right: 0.5em;
	}
		.subitem:last-child {
			margin-right: 0;
		}
		.subitem > span {
			display: block;
		}
			.subitem > span:first-child {
				font-size: 75%;
			}
			.subitem > span:nth-child(2) {
				font-size: 200%;
				line-height: 1.2em;
			}
	.item .desc {
		font-size: 75%;
		line-height: 1em;
	}

/* Washicons */

[class^="icon-wh-"]:before,
[class*=" icon-wh-"]:before {
	font-size: 36px;
	line-height: 1.4em !important;
}


/* */

.bathroom .item,
.bathroom .subitem {
	background-color: rgba( 0, 90, 180, 0.15 );
}

.bedroom .item,
.bedroom .subitem {
	background-color: rgba( 180, 90, 180, 0.15 );
}

.livingroom .item,
.livingroom .subitem {
	background-color: rgba( 0, 180, 0, 0.15 );
}

.cleaning .item,
.cleaning .subitem {
	background-color: rgba( 90, 45, 0, 0.15 );
}