/**
 * Sistema oficial de contenedores Groowleck.
 *
 * Todas las secciones ocupan el 100 % del ancho.
 * El contenido interno utiliza 1400 px o 1280 px.
 *
 * @package Groowleck
 */

.site-container,
.container-theme,
.container-wide,
.container-content,
.container-narrow,
.container-reading {
	width: min(
		calc(100% - (var(--groowleck-gutter) * 2)),
		var(--container-max-width)
	);
	margin-inline: auto;
}

/* Contenedor principal de portada, archivos y rejillas: 1400 px. */
.container-theme,
.container-wide {
	--container-max-width: var(--groowleck-container-wide);
}

/* Contenedor editorial y de contenido: 1280 px. */
.site-container,
.container-content {
	--container-max-width: var(--groowleck-container-content);
}

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

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

.container-full,
.section-full {
	width: 100%;
	margin-inline: auto;
}

.section-shell {
	width: 100%;
	padding-block: var(--groowleck-space-section);
}

.section-shell--compact {
	padding-block: var(--groowleck-space-16);
}

.section-shell--flush {
	padding-block: 0;
}

.content-flow > * + * {
	margin-block-start: var(--groowleck-space-6);
}

.content-flow--compact > * + * {
	margin-block-start: var(--groowleck-space-4);
}

.content-flow--spacious > * + * {
	margin-block-start: var(--groowleck-space-10);
}