.root {
	margin: calc(var(--size-header) * 0.5) auto var(--size-header);

	width: 30em;
	max-width: 50em;

	padding: calc(var(--sp-vertical) * 3) calc(var(--sp-base) * 2);
	border-radius: var(--radius-default);
	box-shadow: var(--sh-card);
	border-top: 3px solid var(--color-primary-light);
	background: var(--color-secondary);
	color: var(--color-secondary-text);
	overflow: auto;
}

@media only screen and (max-width: 800px) {
	.root {
		width: 20em;
	}
}

.title {
	padding: calc(var(--sp-vertical) * 3) calc(var(--sp-base) * 2);
	margin: calc(-3 * var(--sp-vertical)) calc(-2 * var(--sp-base))
		calc(var(--sp-vertical) * 1.5);
	border-bottom: 1px solid var(--color-border);
	font-weight: bold;
	font-size: var(--fs-large);
}