Headings

H1

font-family: “Oswald”, sans-serif;
font-weight: 400;
line-height: 1.2;
color: #006644;

Mobile

font-size: 3.8rem;
margin-bottom: 2rem;

Tablet

font-size: 4.2rem;
margin-bottom: 2.4rem;

Desktop

font-size: 5.6rem;
margin-bottom: 2.4rem;

H2

font-family: “Oswald”, sans-serif;
font-weight: 400;
line-height: 1.2;
color: #006644;

Mobile

font-size: 3rem;
margin-bottom: 1rem;

Tablet

font-size: 3.6rem;
margin-bottom: 1rem;

Desktop

font-size: 4.2rem;
margin-bottom: 1rem;

H3

font-family: “Oswald”, sans-serif;
font-weight: 300;
line-height: 1.2;
color: #006644;

Mobile

font-size: 2.6rem;
margin-bottom: .5rem;

Tablet

font-size: 3rem;
margin-bottom: .5rem;

Desktop

font-size: 3.6rem;
margin-bottom: .5rem;

H4

font-family: “Oswald”, sans-serif;
font-weight: 300;
line-height: 1.2;
color: #006644;

Mobile

font-size: 2.2rem;
margin-bottom: .5rem;

Tablet

font-size: 2.4rem;
margin-bottom: .5rem;

Desktop

font-size: 2.8rem;
margin-bottom: .5rem;

H5

font-family: “Oswald”, sans-serif;
font-weight: 600;
line-height: 1.2;
color: #006644;

Mobile

font-size: 2rem;
margin-bottom: 0;

Tablet

font-size: 2.2rem;
margin-bottom: 0;

Desktop

font-size: 2.2rem;
margin-bottom: 0;

H6

font-family: “Oswald”, sans-serif;
font-weight: 400;
line-height: 1.2;
color: #006644;

Mobile

font-size: 2rem;
margin-bottom: 0;

Tablet

font-size: 2.2rem;
margin-bottom: 0;

Desktop

font-size: 2.2rem;
margin-bottom: 0;

H1 on Hero Image Variation

H1

.u-text__color—white { color: #fff; }
.grad—hero__text h1 { margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,.5); }