h1, h2, h3, h4{
	@include font-family(primary);
}

h1 {
	@include font(x4-large, 65, 700);
	color: palette(light);

	@include mq(null, 425) {
		@include font-size(x3-large);
	}
}

h2 {
	@include font(x2-large, 43, 600);
	color: palette(light);

	@include mq(null, 425) {
		@include font-size(x-large);
	}
	&.on-light {
		color: palette(dark);
	}
}

h3 {
	@include font(large, 34, 400);
	color: palette(light);

	@include mq(null, 425) {
		@include font-size(mid-large);
	}
	&.on-light {
		color: palette(dark);
	}
}

h4 {
	@include font(mid, 28, 600);
	color: palette(text, 400);

	@include mq(null, 425) {
		@include font-size(base);
	}
}

h5 {
	@include font(x-small, 22, 500);
	color: palette(light);
	text-transform: uppercase;

	@include mq(null, 425) {
		@include font-size(x2-small);
	}
}