@use "fluids" with (
	$lower-harmonic-ratio: 1.25,
	$upper-harmonic-ratio: 1.3
);

$breakpoint: 80rem;

$narrow-content-width: 50rem;
$content-width: 60rem;
$wide-content-width: 80rem;

%narrow-content {
	margin-left: auto;
	margin-right: auto;
	max-width: $narrow-content-width;
}

%narrow-content-gutter {
	margin: var(--gap-m);

	@media screen and (min-width: $breakpoint) {
		margin-left: auto;
		margin-right: auto;
		max-width: $narrow-content-width;
	}
}

%content {
	margin-left: auto;
	margin-right: auto;
	max-width: $content-width;
}

%content-gutter {
	margin: var(--gap-m);

	@media screen and (min-width: $breakpoint) {
		margin-left: auto;
		margin-right: auto;
		max-width: $content-width;
	}
}

%wide-content {
	margin-left: auto;
	margin-right: auto;
	max-width: $wide-content-width;
}

%wide-content-gutter {
	margin: var(--gap-m) auto;
	max-width: $wide-content-width;
}

@mixin setup {
	$-gap-lower-base: 1.5rem;
	$-gap-upper-base: 2rem;
	:root {
		--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
		--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
		--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
		--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
		--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
		--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};
	}
}