.dt-section--default { background: var(--dt-bg);          color: var(--dt-ink); }
.dt-section--surface { background: var(--dt-surface);     color: var(--dt-ink); }
.dt-section--alt     { background: var(--dt-bg-alt);      color: var(--dt-ink); }
.dt-section--accent  { background: var(--dt-primary);     color: var(--dt-on-primary); }
.dt-section--dark {
	position: relative;
	background: var(--dt-surface-dark);
	color: var(--dt-on-dark);
	isolation: isolate;
}

.dt-section--accent .dt-heading,
.dt-section--accent a { color: inherit; }

.dt-section--dark .dt-heading,
.dt-section--dark a { color: inherit; }

.dt-section--pad-tight {
	padding-block: var(--space-10);
}

@media (min-width: 768px) {
	.dt-section--pad-tight { padding-block: var(--space-12); }
}

.dt-section--pad-none { padding-block: 0; }