:root {
	--rem-base: 10px;
	--base-font-size: 20px;
	--base-line-height: 1.48;
	--vertical-rhythm: calc(var(--base-line-height) * 1em);
	--base-mixin-font: "Tiempos Text";
	--accent-mixin-font: "Tiempos Headline";
	--secondary-mixin-font: "Helvetica Now Display";
	--base-main-font: var(--base-mixin-font);
	--base-font-sans-serif: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
	--base-font-serif: "Times New Roman", "Times", "Baskerville", "Georgia", serif;
	--base-font: var(--base-main-font), var(--base-font-sans-serif);
	--accent-font: var(--accent-mixin-font), var(--base-font-sans-serif);
	--secondary-font: var(--secondary-mixin-font), var(--base-font-sans-serif);
	--color-white: #fff;
	--color-white--rgb: 255, 255, 255;
	--color-white--darken: #e6e6e6;
	--color-white--lighten: white;
	--color-black: #333;
	--color-black--rgb: 51, 51, 51;
	--color-black--darken: #1a1a1a;
	--color-black--lighten: #4d4d4d;
	--color-red: #dc0539;
	--color-red--rgb: 220, 5, 57;
	--color-red--darken: #aa042c;
	--color-red--lighten: #fa1a50;
	--color-grey: #f7f7f7;
	--color-grey--rgb: 247, 247, 247;
	--color-grey--darken: #dedede;
	--color-grey--lighten: white;
	--color-grey-500: #adadad;
	--color-grey-500--rgb: 173, 173, 173;
	--color-grey-500--darken: #949494;
	--color-grey-500--lighten: #c7c7c7;
	--color-green: #04b34f;
	--color-green--rgb: 4, 179, 79;
	--color-green--darken: #038139;
	--color-green--lighten: #05e565;
	--color-dividers: rgba(var(--color-black--rgb), 0.12);
	--color-text: var(--color-black);
	--color-primary: var(--color-red);
	--color-bg: var(--color-grey);
	--color-error-bg: rgba(var(--color-red--rgb), 0.08);
	--animation-duration: 0.3s;
	--animation-timing-function: ease;
	--container: 1375px;
	--gutter: 40px;
	--h1: 80px;
	--h2: 60px;
	--h3: 36px;
	--h4: 22px;
	--h5: clamp(18px, 2.4rem, 24px);
	--h6: clamp(16px, 2rem, 20px);
}
@media (max-width: 1279px) {
	:root {
		--h1: 60px;
		--h2: 60px;
		--h3: 36px;
		--h4: 22px;
		--h5: clamp(18px, 2.4rem, 24px);
		--h6: clamp(16px, 2rem, 20px);
	}
}
@media (max-width: 767px) {
	:root {
		--gutter: 20px;
	}
}
@media (max-width: 666px) {
	:root {
		--h1: 36px;
		--h2: 36px;
		--h3: 36px;
		--h4: 22px;
		--h5: clamp(18px, 2.4rem, 24px);
		--h6: clamp(16px, 2rem, 20px);
	}
}
@media (min-width: 812px) and (max-height: 414px) and (orientation: landscape) {
	:root {
		--gutter: 50px;
	}
}
