/**
 * Global containers and section layout primitives.
 */

.df-container,
.df-container-wide,
.df-container-text {
	width: calc(100% - (var(--df-gutter) * 2));
	margin-inline: auto;
}

.df-container {
	max-width: var(--df-container);
}

.df-container-wide {
	max-width: var(--df-container-wide);
}

.df-container-text {
	max-width: var(--df-container-text);
}

.df-section {
	position: relative;
	padding-block: var(--df-section-space);
}

.df-section--cream {
	background: var(--df-color-cream);
}

.df-section--beige {
	background: var(--df-color-beige);
}

.df-section--dark {
	background: var(--df-color-ink);
	color: var(--df-color-white);
}

.df-section--dark h1,
.df-section--dark h2,
.df-section--dark h3,
.df-section--dark h4,
.df-section--dark h5,
.df-section--dark h6 {
	color: var(--df-color-white);
}