/*
 * Text sizes for CMS pages whose body is written in the page editor
 * (Organic & Quality Certification, Work with us, Security, Terms & Conditions,
 * Privacy Policy, Shipping & Delivery, Cancelation & Return).
 *
 * That content used to carry its own inline font sizes in em/rem and its own
 * font family, so every page came out a different size from the coded pages
 * (About us, Mission and vision, Our Team ...). The inline sizes were removed
 * from the content and the editor's outer wrapper got the `tw-cms` class, so
 * these rules set one scale that matches the coded pages:
 *
 *   section title 32px, sub-heading 22px, card title 20px, body 18px
 *   (phones: 22 / 20 / 18 / 17)
 *
 * When a new page is written in the editor, put `class="tw-cms"` on its outer
 * wrapper and leave font sizes out of the inline styles.
 */

.tw-cms {
    font-size: 18px;
    line-height: 1.8;
}

.tw-cms h2 {
    font-size: 32px;
    line-height: 1.25;
}

.tw-cms h3 {
    font-size: 22px;
    line-height: 1.35;
}

.tw-cms h4 {
    font-size: 20px;
    line-height: 1.4;
}

.tw-cms p,
.tw-cms li {
    font-size: 18px;
    line-height: 1.8;
}

@media (max-width: 767px) {
    .tw-cms h2 {
        font-size: 22px;
    }

    .tw-cms h3 {
        font-size: 20px;
    }

    .tw-cms h4 {
        font-size: 18px;
    }

    .tw-cms,
    .tw-cms p,
    .tw-cms li {
        font-size: 17px;
        line-height: 1.7;
    }
}