h1.h1 {
    --max-font: 5;
    --max-font-unit: 5rem;
    --min-font: calc(0.4 * var(--max-font));
    --min-font-unit: calc(0.4 * var(--max-font-unit));
    font-size: calc(var(--min-font-unit) + (var(--max-font) - var(--min-font)) * (100vw - var(--min-width-unit)) / (var(--max-width) - var(--min-width)));
    line-height: var(--header-line-height);
}

h2.h2 {
    --max-font: 4;
    --max-font-unit: 4rem;
    --min-font: calc(0.5 * var(--max-font));
    --min-font-unit: calc(0.5 * var(--max-font-unit));
    font-size: calc(var(--min-font-unit) + (var(--max-font) - var(--min-font)) * (100vw - var(--min-width-unit)) / (var(--max-width) - var(--min-width)));
    line-height: var(--header-line-height);
}

h2.h2.byline {
    --max-font: 1.625;
    --max-font-unit: 1.625rem;
    --min-font: calc(0.7 * var(--max-font));
    --min-font-unit: calc(0.7 * var(--max-font-unit));
    font-size: calc(var(--min-font-unit) + (var(--max-font) - var(--min-font)) * (100vw - var(--min-width-unit)) / (var(--max-width) - var(--min-width)));
    font-weight: normal;
    line-height: var(--byline-line-height);
}

h2.h2.byline em {
    --max-font: 2;
    --max-font-unit: 2rem;
    --min-font: calc(0.7 * var(--max-font));
    --min-font-unit: calc(0.7 * var(--max-font-unit));
    font-size: calc(var(--min-font-unit) + (var(--max-font) - var(--min-font)) * (100vw - var(--min-width-unit)) / (var(--max-width) - var(--min-width)));
    margin-right: 0.2rem;
}

h5.h5 {
    color: var(--gray);
    font-size: 1rem;
    line-height: var(--header-line-height);
    text-transform: uppercase;
}

hgroup h2.h2:not(:last-child) {
    margin-bottom: 50px;
}

.gray {
    color: var(--gray);
}

.black {
    color: #000000;
}

P.drop-cap:first-letter {
    font-size: 2rem;
    line-height: calc(var(--base-font-size) * var(--line-height));
}

@media screen and (min-width: 1000px) {
    h1.h1 {
        font-size: var(--max-font-unit);
    }
    h2.h2 {
        font-size: var(--max-font-unit);
    }
}