/*
    Headings
*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
	font-family: var(--heading-font);
	font-weight: 700;
	font-style: normal;
	margin-bottom: 0.5em;
	margin-top: 0;
	color: inherit;
	text-wrap: balance;
}

h1,
.h1,
h2,
.h2 {
	line-height: 1.1;
}

h3,
.h3,
h4,
.h4 {
	line-height: 1.2;
}

h5,
.h5 {
	line-height: 1.4;
}

h6,
.h6 {
	font-family: var(--body-font);
	font-weight: 700;
	font-style: normal;
	line-height: 1.3;
	margin-bottom: 0.2em;
	margin-top: 0;
	color: inherit;
	text-wrap: balance;
}

/* 
    Header 1 
*/
h1,
.h1 {
	font-size: 3rem;
}
@media (min-width: 576px) {
	h1,
	.h1 {
		font-size: 3.4rem;
	}
}
@media (min-width: 768px) {
	h1,
	.h1 {
		font-size: 3.6rem;
	}
}
@media (min-width: 1024px) {
	h1,
	.h1 {
		font-size: 3.8rem;
	}
}
@media (min-width: 1280px) {
	h1,
	.h1 {
		font-size: 4rem;
	}
}
@media (min-width: 1540px) {
	h1,
	.h1 {
		font-size: 4.2rem;
	}
}

/* 
    Header 2
*/
h2,
.h2 {
	font-size: 2.2rem;
}
@media (min-width: 576px) {
	h2,
	.h2 {
		font-size: 2.4rem;
	}
}
@media (min-width: 768px) {
	h2,
	.h2 {
		font-size: 2.6rem;
	}
}
@media (min-width: 1024px) {
	h2,
	.h2 {
		font-size: 2.8rem;
	}
}
@media (min-width: 1280px) {
	h2,
	.h2 {
		font-size: 3rem;
	}
}
@media (min-width: 1540px) {
	h2,
	.h2 {
		font-size: 3.2rem;
	}
}

/* 
    Header 3 
*/
h3,
.h3 {
	font-size: 1.6rem;
}
@media (min-width: 576px) {
	h3,
	.h3 {
		font-size: 1.8rem;
	}
}
@media (min-width: 768px) {
	h3,
	.h3 {
		font-size: 2rem;
	}
}
@media (min-width: 1024px) {
	h3,
	.h3 {
		font-size: 2.2rem;
	}
}
@media (min-width: 1280px) {
	h3,
	.h3 {
		font-size: 2.4rem;
	}
}
@media (min-width: 1540px) {
	h3,
	.h3 {
		font-size: 2.6rem;
	}
}

/* 
    Header 4
*/
h4,
.h4 {
	font-size: 1.6rem;
}
@media (min-width: 576px) {
	h4,
	.h4 {
		font-size: 1.6rem;
	}
}
@media (min-width: 768px) {
	h4,
	.h4 {
		font-size: 1.8rem;
	}
}
@media (min-width: 1024px) {
	h4,
	.h4 {
		font-size: 1.8rem;
	}
}
@media (min-width: 1280px) {
	h4,
	.h4 {
		font-size: 1.8rem;
	}
}
@media (min-width: 1540px) {
	h4,
	.h4 {
		font-size: 1.8rem;
	}
}

/* 
    Header 5 
*/
h5,
.h5 {
	font-size: 1.4rem;
}
@media (min-width: 576px) {
	h5,
	.h5 {
		font-size: 1.4rem;
	}
}
@media (min-width: 768px) {
	h5,
	.h5 {
		font-size: 1.6rem;
	}
}
@media (min-width: 1024px) {
	h5,
	.h5 {
		font-size: 1.6rem;
	}
}
@media (min-width: 1280px) {
	h5,
	.h5 {
		font-size: 1.6rem;
	}
}
@media (min-width: 1540px) {
	h5,
	.h5 {
		font-size: 1.6rem;
	}
}

/* 
    Header 6 
*/
h6,
.h6 {
	font-size: 1.3rem;
	text-transform: uppercase;
}
@media (min-width: 576px) {
	h6,
	.h6 {
		font-size: 1.3rem;
	}
}
@media (min-width: 768px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1024px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1280px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}
@media (min-width: 1540px) {
	h6,
	.h6 {
		font-size: 1.4rem;
	}
}

/*
    Paragraphs
*/
p {
	margin-top: 0;
	margin-bottom: 1rem;
}

/*
    Lead Paragraphs
*/
.lead {
	font-weight: 300;
	line-height: 1.5;
	text-wrap: balance;
}

.lead {
	font-size: 1.8rem;
}
@media (min-width: 576px) {
	.lead {
		font-size: 1.9rem;
	}
}
@media (min-width: 768px) {
	.lead {
		font-size: 2rem;
	}
}
@media (min-width: 1024px) {
	.lead {
		font-size: 2.1rem;
	}
}
@media (min-width: 1280px) {
	.lead {
		font-size: 2.2rem;
	}
}
@media (min-width: 1540px) {
	.lead {
		font-size: 2.3rem;
	}
}

/*
    Last child elements
*/
h1:last-child,
.h1:last-child,
h2:last-child,
.h2:last-child,
h3:last-child,
.h3:last-child,
h4:last-child,
.h4:last-child,
h5:last-child,
.h5:last-child,
h6:last-child,
.h6:last-child,
p:last-child {
	margin-bottom: 0 !important;
}

/*
    Text highlighting
*/
::selection,
mark,
.highlight {
	background-color: var(--color-primary) !important;
	color: var(--color-primary-contrast) !important;
}
