@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

h1, .h1{
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 60px;
    line-height: 1.13;
}

h2, .h2{
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 50px;
    line-height: 1.12;
}

h3, .h3{
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.4;
}

h4, .h4{
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.36;
}

.subhead{
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.36;
}

.body-text-large{
    font-weight: 400;
    font-size: 24px;
    line-height: 1.33;
}

.body-text{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

.button-text{
    font-weight: 600;
    font-size: 18px;
    line-height: 1.22;
}

.overline{
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.caption{
    font-weight: 400;
    font-size: 12px;
    line-height: 1.33;
}

@media only screen and (max-width: 767px){
    h1, .h1{
        font-size: 56px;
    }
    h2, .h2{
        font-size: 32px;
    }
    h3, .h3{
        font-size: 32px;
    }
    h4, .h4{
        font-size: 24px;
    }
    .body-text-large{
        font-size: 16px;
    }
    .subhead{
        font-size: 18px;
    }
    .overline{
        font-size: 12px;
    }
}