@layer components {

    .facts {
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-9) var(--gutter) 0;

        scroll-margin-top: var(--h-header);
    }

    .facts__inner {
        display: grid;
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
        gap: clamp(32px, 5vw, 96px);
        align-items: start;
    }

    .facts__label {
        padding: var(--s-3) var(--s-4) var(--s-4);
        border: 1px solid var(--c-ink);
        border-radius: var(--r-1);
    }

    .facts__table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--t-sm);
        font-variant-numeric: tabular-nums;
    }

    .facts__caption {
        caption-side: top;
        padding-bottom: var(--s-2);
        border-bottom: 8px solid var(--c-ink);
        text-align: left;
    }

    .facts__title,
    .facts__line {
        display: block;
    }

    .facts__line + .facts__line {
        margin-top: 2px;
    }

    .facts__title {
        font-family: var(--f-display);
        font-size: var(--t-xl);
        font-weight: var(--fw-display);
        line-height: var(--lh-tight);
        margin-bottom: var(--s-2);
    }

    .facts__line strong {
        font-weight: 600;
    }

    .facts__head th {
        padding-block: var(--s-2);
        border-bottom: 1px solid var(--c-ink);
        font-weight: 600;
        text-align: left;
    }

    .facts__table th,
    .facts__table td {
        padding-block: 5px;
        border-bottom: 1px solid var(--c-line-strong);
        vertical-align: top;
    }

    .facts__row th {
        padding-right: var(--s-3);
        font-weight: 600;
        text-align: left;
    }

    .facts__amount {
        padding-right: var(--s-3);
        white-space: nowrap;
    }

    .facts__dv {
        text-align: right;
        white-space: nowrap;
    }

    .facts__head .facts__dv {
        text-align: right;
    }

    .facts__row--sub th {
        padding-left: var(--s-4);
        font-weight: 400;
    }

    .facts__row--sub2 th {
        padding-left: var(--s-6);
        font-weight: 400;
    }

    .facts__row--calories th,
    .facts__row--calories td {
        border-bottom: 4px solid var(--c-ink);
    }

    .facts__row--rule th,
    .facts__row--rule td {
        border-top: 8px solid var(--c-ink);
    }

    .facts__aside {
        display: block;
        font-weight: 400;
        color: var(--c-muted);
    }

    .facts__table tbody tr:last-child th,
    .facts__table tbody tr:last-child td {
        border-bottom: 8px solid var(--c-ink);
    }

    .facts__foot td {
        padding-top: var(--s-2);
        border-bottom: 0;
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .facts__more {
        display: grid;
        gap: var(--s-5);
        max-width: var(--w-read);
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

    .facts__label-name {
        margin-bottom: var(--s-1);
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-ink);
    }

    .facts__warnings {
        display: grid;
        gap: var(--s-2);
        padding-left: 1.1em;
        list-style: disc;
    }

    .facts__statement {
        padding-top: var(--s-4);
        border-top: 1px solid var(--c-line);
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .facts--statement .facts__inner {
        display: block;
        max-width: var(--w-read);
    }

    @media (max-width: 899px) {
        .facts__inner {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 479px) {
        .facts__amount {
            padding-right: var(--s-2);
            white-space: normal;
        }

        .facts__row th {
            overflow-wrap: anywhere;
        }
    }

}