#library {
	.component;

	header {
		white-space: pre; // separator
	}

	.search {
		order: 1;
		&.open ~ * { display: none; }
	}

	.art img, .art .icon {
		width: 64px;
	}

	.art .icon {
		filter: drop-shadow(var(--text-shadow));
	}

	.group {
		cursor: pointer;
		h2 { font-weight: normal; }
	}

	.tiles {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-gap: 2px;

		li {
			text-align: center;
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.08);
			height: 200px;

			h2 {
				font-size: 150%;
				margin: 4px 0;
			}
		}
	}
}