section.table-component {
    margin-block: 8rem;
    container-type: inline-size;
    container-name: table;

    .region {
        max-width: var(--content-width-wide-2);
    }

    :where(.table-container) {
        max-width: 100%;
        overflow-x: auto;
    }

    :where(.table-headline h2) {
        color: var(--color-brand-navy);
        font-size: 2.4rem;
        font-weight: 600;
    }

    :where(.table) {
        border-collapse: collapse;
        margin: 4rem auto;
        min-width: fit-content;

    }

    :where(caption) {
        margin-bottom: 1rem;
        color: var(--color-brand-navy);
        font-weight: 500;
    }

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

    :where(th) {
        background: var(--color-brand-navy);
        color: var(--color-primary-white);
        font-weight: 600;
        border-color: var(--color-brand-navy);
    }

    :where(td, th) {
        border: solid 1px var(--color-gray-light);
        padding: 0.8rem 1rem;
        line-height: 1.3;
        text-align: center;
    }

    :where(td.no-data) {
        background: var(--color-gray-light-web);
    }
}

@media screen and (max-width: 65em) {
    section.table-component {
        padding-inline: var(--mobile-padding);
    }
}