:root {
    --font-size-heading-1: 38px;
    --line-height-heading-1: 46px;

    --font-size-heading-2: 30px;
    --line-height-heading-2: 38px;

    --font-size-heading-3: 24px;
    --line-height-heading-3: 32px;

    --font-size-title: 20px;
    --line-height-title: 28px;

    --font-size-subtitle: 16px;
    --line-height-subtitle: 24px;

    --font-size-body-1: 14px;
    --line-height-body-1: 22px;

    --font-size-body-2: 14px;
    --line-height-body-2: 22px;

    --font-size-caption: 12px;
    --line-height-caption: 18px;
}

.heading-1 {
    font-size: var(--font-size-heading-1);
    line-height: var(--line-height-heading-1);
}

.heading-2 {
    font-size: var(--font-size-heading-2);
    line-height: var(--line-height-heading-2);
}

.heading-3 {
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading-3);
}

.title {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
}

.subtitle {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
}

.body-1 {
    font-size: var(--font-size-body-1);
    line-height: var(--line-height-body-1);
}

.body-2 {
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
}

.caption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

@media (min-width: 744px) {
    .heading-1 {
        font-size: 46px;
        line-height: 56px;
    }

    .heading-2 {
        font-size: 38px;
        line-height: 46px;
    }

    .heading-3 {
        font-size: 30px;
        line-height: 38px;
    }

    .title {
        font-size: 24px;
        line-height: 32px;
    }

    .subtitle {
        font-size: 20px;
        line-height: 28px;
    }

    .body-1 {
        font-size: 16px;
        line-height: 24px;
    }

    .body-2 {
        font-size: 14px;
        line-height: 22px;
    }

    .caption {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (min-width: 1250px) {

    .heading-1 {
        font-size: 56px;
        line-height: 64px;
    }

    .heading-2 {
        font-size: 46px;
        line-height: 56px;
    }

    .heading-3 {
        font-size: 38px;
        line-height: 46px;
    }

    .title {
        font-size: 30px;
        line-height: 38px;
    }

    .subtitle {
        font-size: 24px;
        line-height: 32px;
    }

    .body-1 {
        font-size: 20px;
        line-height: 28px;
    }

    .body-2 {
        font-size: 16px;
        line-height: 24px;
    }

    .caption {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (min-width: 1920px) {

    .heading-1 {
        font-size: 56px;
        line-height: 64px;
    }

    .heading-2 {
        font-size: 46px;
        line-height: 56px;
    }

    .heading-3 {
        font-size: 38px;
        line-height: 46px;
    }

    .title {
        font-size: 30px;
        line-height: 38px;
    }

    .subtitle {
        font-size: 24px;
        line-height: 32px;
    }

    .body-1 {
        font-size: 20px;
        line-height: 28px;
    }

    .body-2 {
        font-size: 16px;
        line-height: 24px;
    }

    .caption {
        font-size: 12px;
        line-height: 18px;
    }
}

@media (max-width: 2560px) {}