:root {
	--color-primary: #325969;
    --color-primaryRGB: 50,89,105;
	--color-secondary: #afc1cd;
	--color-cta: #e95c0c;
	
	--max-width: 1080px;
	--align-wide: 1440px;
	--gutter: 15px;
	--gap: 15px;
	
	--font-size: 16px;
	--font-size-xsmall: 12px;
	--font-size-small: 14px;
	--font-size-medium: 20px;
	--font-size-large: 24px;
	--font-size-xlarge: 28px;
	--font-size-hero: 28px;
}

@media (min-width: 640px) {
	:root {
		--gutter: 25px;
		--gap: 25px;
		
		--font-size-medium: 24px;
		--font-size-large: 32px;
		--font-size-xlarge: 48px;
		--font-size-hero: 64px;
	}
}

@media (min-width: 920px) {
	:root {
		--gutter: 40px;
		--gap: 30px;
	}
}

@media (min-width: 1140px) {
:root {
		--gutter: 60px;
		--gap: 30px;
	}
}