/*
    Address HTML markup generated from Markdown, that Tailwind's typography
    plugin doesn't cover already.
*/
.prose div.footnote-definition {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;

    /*
        Use Tailwind's variables for the spacing, to make sure the overal design
        stays consistent.

        Sources:
        - https://tailwindcss.com/docs/padding
        - https://tailwindcss.com/docs/margin
    */
    margin: calc(var(--spacing) * 8) calc(var(--spacing) * 16);
    padding: calc(var(--spacing) * 4) 0;

    border-top: 1px solid;

    /*
        Recreate the effect of `text-xs`.
        Source: https://tailwindcss.com/docs/font-size
    */
    font-size: var(--text-xs); /* 0.75rem (12px) */
    line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */
}
.prose div.footnote-definition sup.footnote-definition-label {
    /*
        Tailwind applies various rules that make `<sup>`s look good within text,
        but get in our way here.
    */
    all: unset;

    font-weight: bold;
}
.prose div.footnote-definition p {
    /*
        Override Tailwind rules, to prevent the paragraph from ending up lower
        than the label.
    */
    margin: 0;
}