body {
    font-family: var(--ff--normal);
    font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--fw--medium);
}


/* display */
.mq20-display-1,
.mq20-display-2 {
    letter-spacing: var(--ls--xxl);

    font-weight: var(--fw--medium);
}

.mq20-display-1 {
    font-size: 144px;
    line-height: 116px;
}

.mq20-display-2 {
    font-size: 102px;
    line-height: 122px;
}

@media only screen and (max-width: 1025px) {
    .mq20-display-1 {
        font-size: 72px;
        line-height: 80px;
    }

    .mq20-display-1--mobile {
        font-size: 72px !important;
        line-height: 80px !important;
    }

    .mq20-display-2 {
        letter-spacing: var(--ls--xl);

        font-size: 60px;
        line-height: 66px;
    }

    .mq20-display-2--mobile {
        letter-spacing: var(--ls--xl) !important;

        font-size: 60px !important;
        line-height: 66px !important;
    }
}


/* heading */
.mq20-heading-1,
.mq20-heading-2,
.mq20-heading-3,
.mq20-heading-4,
.mq20-heading-5,
.mq20-heading-6,
.mq20-heading-7,
.mq20-heading-8,
.mq20-heading-9,
.mq20-heading-10 {
    font-weight: var(--fw--medium);
}

.mq20-heading-1 {
    letter-spacing: var(--ls--xxl);

    font-size: 80px;
    line-height: 88px;
}

.mq20-heading-2 {
    letter-spacing: var(--ls--xxl);

    font-size: 72px;
    line-height: 80px;
}

.mq20-heading-3 {
    letter-spacing: var(--ls--xl);

    font-size: 60px;
    line-height: 66px;
}

.mq20-heading-4 {
    letter-spacing: var(--ls--xl);

    font-size: 52px;
    line-height: 60px;
}

.mq20-heading-5 {
    letter-spacing: var(--ls--xl);

    font-size: 40px;
    line-height: 48px;
}

.mq20-heading-6 {
    letter-spacing: var(--ls--l);

    font-size: 34px;
    line-height: 40px;
}

.mq20-heading-7 {
    letter-spacing: var(--ls--m);

    font-size: 28px;
    line-height: 34px;
}

.mq20-heading-8 {
    letter-spacing: var(--ls--s);

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

.mq20-heading-9 {
    letter-spacing: var(--ls--s);

    font-size: 18px;
    line-height: 28px;
}

.mq20-heading-10 {
    letter-spacing: var(--ls--s);

    font-size: 16px;
    line-height: 26px;
}

@media only screen and (max-width: 1025px) {
    .mq20-heading-1 {
        letter-spacing: var(--ls--xl);

        font-size: 40px;
        line-height: 48px;
    }

    .mq20-heading-1--mobile {
        letter-spacing: var(--ls--xl) !important;

        font-size: 40px !important;
        line-height: 48px !important;
    }

    .mq20-heading-2 {
        letter-spacing: var(--ls--l);

        font-size: 34px;
        line-height: 40px;
    }

    .mq20-heading-2--mobile {
        letter-spacing: var(--ls--l) !important;

        font-size: 34px !important;
        line-height: 40px !important;
    }

    .mq20-heading-3 {
        letter-spacing: var(--ls--m);

        font-size: 28px;
        line-height: 34px;
    }

    .mq20-heading-3--mobile {
        letter-spacing: var(--ls--m) !important;

        font-size: 28px !important;
        line-height: 34px !important;
    }

    .mq20-heading-4 {
        letter-spacing: var(--ls--s);

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

    .mq20-heading-4--mobile {
        letter-spacing: var(--ls--s) !important;

        font-size: 20px !important;
        line-height: 28px !important;
    }

    .mq20-heading-5 {
        letter-spacing: var(--ls--s);

        font-size: 18px;
        line-height: 28px;
    }

    .mq20-heading-5--mobile {
        letter-spacing: var(--ls--s) !important;

        font-size: 18px !important;
        line-height: 28px !important;
    }

    .mq20-heading-6 {
        letter-spacing: var(--ls--s);

        font-size: 16px;
        line-height: 26px;
    }

    .mq20-heading-6--mobile {
        letter-spacing: var(--ls--s) !important;

        font-size: 16px !important;
        line-height: 26px !important;
    }
}


/* kicker */
.mq20-kicker {
    text-transform: uppercase;

    font-size: 12px;
    font-weight: var(--fw--light);
    line-height: 18px;
}


/* body */
.mq20-body-1,
.mq20-body-2,
.mq20-body-3,
.mq20-body-4 {
    font-weight: var(--fw--light);
}

.mq20-body-1--medium,
.mq20-body-2--medium,
.mq20-body-3--medium,
.mq20-body-4--medium {
    font-weight: var(--fw--medium);
}

.mq20-body-1,
.mq20-body-1--medium {
    font-size: 18px;
    line-height: 28px;
}

.mq20-body-2,
.mq20-body-2--medium {
    font-size: 16px;
    line-height: 22px;
}

.mq20-body-3,
.mq20-body-3--medium {
    font-size: 14px;
    line-height: 20px;
}

.mq20-body-4,
.mq20-body-4--medium {
    font-size: 12px;
    line-height: 16px;
}

@media only screen and (max-width: 1025px) {
    .mq20-body-1,
    .mq20-body-1--medium {
        font-size: 16px;
        line-height: 24px;
    }

    .mq20-body-1--mobile,
    .mq20-body-1--medium--mobile {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .mq20-body-2,
    .mq20-body-2--medium {
        font-size: 14px;
        line-height: 20px;
    }

    .mq20-body-2--mobile,
    .mq20-body-2--medium--mobile {
        font-size: 14px !important;
        line-height: 20px !important;
    }
}


/* paragraph */
.mq20-paragraph-1,
.mq20-paragraph-2 {
    font-weight: var(--fw--light);
}

.mq20-paragraph-1--medium,
.mq20-paragraph-2--medium {
    font-weight: var(--fw--medium);
}

.mq20-paragraph-1,
.mq20-paragraph-1--medium {
    font-size: 18px;
    line-height: 32px;
}

.mq20-paragraph-1--mobile,
.mq20-paragraph-1--mobile--medium {
    font-size: 18px;
    line-height: 28px;
}

.mq20-paragraph-2,
.mq20-paragraph-2--medium {
    font-size: 16px;
    line-height: 28px;
}

.mq20-paragraph-2--mobile,
.mq20-paragraph-2--mobile--medium {
    font-size: 16px;
    line-height: 24px;
}


/* caption */
.mq20-caption-1,
.mq20-caption-2 {
    font-weight: var(--fw--light);
}

.mq20-caption-1 {
    font-size: 14px;
    line-height: 20px;
}

.mq20-caption-2 {
    font-size: 12px;
    line-height: 16px;
}


/* quote */
.mq20-quote-1,
.mq20-quote-2,
.mq20-quote-3 {
    letter-spacing: var(--ls--s);

    font-family: var(--ff--decorative);
    font-weight: var(--fw--regular);
}

.mq20-quote-1 {
    font-size: 36px;
    line-height: 42px;
}

.mq20-quote-2 {
    font-size: 28px;
    line-height: 34px;
}

.mq20-quote-3 {
    font-size: 20px;
    line-height: 28px;
}

@media only screen and (max-width: 1025px) {
    .mq20-quote-1 {
        font-size: 28px;
        line-height: 34px;
    }

    .mq20-quote-1--mobile {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    .mq20-quote-2 {
        font-size: 20px;
        line-height: 28px;
    }

    .mq20-quote-2--mobile {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}


/* action */
.mq20-button--large,
.mq20-button--medium,
.mq20-button--small,
.mq20-link-1,
.mq20-link-2,
.mq20-menu-item-1--medium,
.mq20-menu-item-2--medium,
.mq20-menu-item-3--medium {
    font-weight: var(--fw--medium);
}

.mq20-button--large {
    font-size: 18px;
    line-height: 24px;
}

.mq20-button--medium {
    font-size: 16px;
    line-height: 24px;
}

.mq20-button--small {
    font-size: 14px;
    line-height: 20px;
}

.mq20-link-1,
.mq20-link-2 {
    color: var(--c_brand--500);
}

.mq20-link-1 {
    font-size: 18px;
    line-height: 28px;
}

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

.mq20-menu-item-1,
.mq20-menu-item-1--medium {
    font-size: 16px;
    line-height: 24px;
}

.mq20-menu-item-2,
.mq20-menu-item-2--medium {
    font-size: 14px;
    line-height: 20px;
}

.mq20-menu-item-2,
.mq20-menu-item-2--medium {
    font-size: 14px;
    line-height: 20px;
}

.mq20-menu-item-3,
.mq20-menu-item-3--medium {
    font-size: 18px;
    line-height: 26px;
}

@media only screen and (max-width: 1025px) {
    .mq20-link-1 {
        font-size: 16px;
        line-height: 24px;
    }

    .mq20-menu-item-1,
    .mq20-menu-item-1--medium {
        letter-spacing: var(--ls--m);

        font-size: 28px;
        line-height: 34px;
    }

    .mq20-menu-item-2,
    .mq20-menu-item-2--medium {
        letter-spacing: var(--ls--m);

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