:root {

	/* Breakpoints (note these can not be used inside media query definitions) */
	--bp-2xs: 375px;
	--bp-xs:  480px;
	--bp-sm:  600px;
	--bp-md:  720px;
	--bp-lg:  900px;
	--bp-xl:  1024px;
	--bp-2xl: 1280px;

	/* Container calculations */
	--content-side-margins: var(--sp-800);

	--actual-max-width: 1280px; /* What we want the max width to work out to, margins included */
	--content-max-width: calc(var(--actual-max-width) - (var(--content-side-margins) * 2));
	
	--content-section-vertical-padding: var(--sp-1600);
}

@media only screen and (max-width: 720px) {
  :root {
		--content-side-margins: var(--sp-600);
		--content-section-vertical-padding: var(--sp-1000);
	}  
}

@media only screen and (max-width: 480px) {
  :root {
		--content-side-margins: var(--sp-400);
		--content-section-vertical-padding: var(--sp-800);
	}
}