@media print {
    section.table-component {
        overflow-x: visible;
        max-width: 100%;

        :where(.table.row-label tr > :first-child) {
            position: static;
        }

        table {
            width: 100%;
        }
    }
}

section.table-component {
    container-type: inline-size;
    container-name: table;
    max-width: 100dvw;
    overflow-x: auto;
    --blue-transparent-1: rgba(183, 221, 225, 0.25);
    --blue-transparent-2: rgba(183, 221, 225, 0.1);

    table, th, td {
        border: 2px solid var(--color-primary-white);
    }


    .header {
        margin-bottom: 4rem;
        max-width: 70dvw;
    }


    :where(.table) {
        margin: 0 auto;
        min-width: fit-content;

    }

    :where(caption) {
        margin-bottom: 1rem;
        color: var(--color-brand-navy);
        font-weight: 500;
        max-width: 70dvw;

    }

    :where(.table.row-label tr > :first-child) {
        position: sticky;
        left: 0;
    }

    :where(th),
    :where(thead > tr > *){
        background: var(--color-brand-pale-blue);
        color: var(--color-brand-teal);
        font-weight: 700;
        border-color: var(--color-primary-white);
    }

    :where(td, th) {
        padding: 1rem 2.5rem;
        line-height: 1.3;
        text-align: center;
    }

    tr:not(:has(th)) {
        td {
            background: var(--blue-transparent-1);
        }

        &:nth-child(even) {
            td {
                background: var(--blue-transparent-2);
            }
        }
    }


}