$tiny-gap: 0.3rem;
$small-gap: 0.5rem;
$normal-gap: 1.5rem;
$large-gap: 2.5rem;
$larger-gap: 4rem;
$huge-gap: 6rem;

$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: $normal-gap $normal-gap;

	@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: $normal-gap $normal-gap;

	@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: $normal-gap auto;
	max-width: $wide-content-width;
}