// =Prose
.prose {
    // params
    --prose-h1-to-tag: 5rem;
    --prose-h2-to-tag: 3rem;
    --prose-h3-to-tag: 3rem;
    --prose-h4-to-tag: 2rem;
    --prose-h5-to-tag: 2rem;
    --prose-h6-to-tag: 2rem;
    --prose-tag-to-tag: 5rem;
    --prose-tag-to-h2: 10rem;
    --prose-tag-to-h3: 8rem;
    --prose-tag-to-h4: 8rem;
    --prose-tag-to-h5: 8rem;
    --prose-tag-to-h6: 8rem;
    --prose-figure-to-tag: 6rem;

    // generate size params
    @include generate-prose-size(scale(type), std);
    @include for-lg { @include generate-prose-size(scale(type-lg), lg); }
    @include for-md { @include generate-prose-size(scale(type-md), md); }
    @include for-sm { @include generate-prose-size(scale(type-sm), sm); }

    .prose-title {
        font-size: var(--prose-h1-font-size);
        line-height: var(--prose-h1-line-height);
    }
    .prose-lead {
        font-size: var(--prose-lead-font-size);
        line-height: var(--prose-lead-line-height);
    }
    .prose-title + .prose-lead {
        margin-top: var(--prose-h1-to-tag);
    }

    .prose-body {
        // spacing
        & > h1 + * { margin-top: var(--prose-h1-to-tag); }
        & > h2 + * { margin-top: var(--prose-h2-to-tag); }
        & > h3 + * { margin-top: var(--prose-h3-to-tag); }
        & > h4 + * { margin-top: var(--prose-h4-to-tag); }
        & > h5 + * { margin-top: var(--prose-h5-to-tag); }
        & > h6 + * { margin-top: var(--prose-h6-to-tag); }

        & > * {
            & + h2 { margin-top: var(--prose-tag-to-h2); }
            & + h3 { margin-top: var(--prose-tag-to-h3); }
            & + h4 { margin-top: var(--prose-tag-to-h4); }
            & + h5 { margin-top: var(--prose-tag-to-h5); }
            & + h6 { margin-top: var(--prose-tag-to-h6); }
            & + *  { margin-top: var(--prose-tag-to-tag); }
        }
        & > figure + *,
        & > table + *,
        & > div + * {
            margin-top: var(--prose-figure-to-tag);
        }

        // size
        & > h1,
        & > h1.prose-title {
            font-size: var(--prose-h1-font-size);
            line-height: var(--prose-h1-line-height);
        }
        & > h2 {
            font-size: var(--prose-h2-font-size);
            line-height: var(--prose-h2-line-height);
        }
        & > h3 {
            font-size: var(--prose-h3-font-size);
            line-height: var(--prose-h3-line-height);
        }
        & > h4 {
            font-size: var(--prose-h4-font-size);
            line-height: var(--prose-h4-line-height);
        }
        & > h5 {
            font-size: var(--prose-h5-font-size);
            line-height: var(--prose-h5-line-height);
        }
        & > h6 {
            font-size: var(--prose-h6-font-size);
            line-height: var(--prose-h6-line-height);
        }
        & > p.prose-lead {
            font-size: var(--prose-lead-font-size);
            line-height: var(--prose-lead-line-height);
        }
        & > p {
            font-size: var(--prose-p-font-size);
            line-height: var(--prose-p-line-height);
        }
    }
}