// Type

// # Contents
// 1. Typography
// 1.1) Headings
// 1.2) Anchor
// 1.3) Headings
// 2. Responsive

// 1. Typography

// 1.1) Headings
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	margin-bottom: 1.8rem;
	color: $headings-text;
	font-weight: 700;
	line-height: 1.1;
	font-family: $second-font-family;
}

h1, .h1 {
	font-size: 3.6rem;
	font-weight: 400;
	line-height: 1.223;
}

h2, .h2 {
	font-size: 3rem;
	line-height: 1.5;
}

h3, .h3 {
	font-size: 2.5rem;
	line-height: 1.28;
}

h4, .h4 {
	font-size: 2rem;
	line-height: 1.35;
}

h5, .h5 {
	font-size: 1.4rem;
	line-height: 1.429;
}

h6, .h6 {
	font-size: 1.3rem;
	line-height: 1.385;
	font-weight: 600;
}

// 1.2) Anchor

a {
	transition: all .3s;
	color: $primary-color;
	text-decoration: none;
}

a:hover,
a:focus {
	color: $primary-color;
	text-decoration: none;
}

// 1.3) Headings

.heading {
	margin-bottom: 3rem;
	color: $primary-color-dark;

	.title {
		margin-bottom: 1.6rem;
	}

	p {
		letter-spacing: -.015em;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

.light-title {
	margin-bottom: 2rem;
	font-weight: 300;
}

.section-title {
	text-transform: uppercase;
	font-size: 1.8rem;
}

.section-sub-title {
	font-size: 1.6rem;
	text-transform: uppercase;
}

// 2. Responsive

@include mq(md) {
	h1, .h1 {
		font-size: 4.5rem;
	}

	h2, .h2 {
		font-size: 2.5rem;
	}

	.heading {
		margin-bottom: 4rem;
	}
}

@include mq(lg) {
	h1, .h1 {
		font-size: 5rem;
	}

	h2, .h2 {
		font-size: 3rem;
	}

	.heading {
		margin-bottom: 5rem;
	}
}