:where(.breadcrumbs-wrapper) {
    font-size: 1.4rem;
    margin-bottom: 2rem;

    container-type: inline-size;
    container-name: breadcrumbs-container;

    :where(.breadcrumbs) {
        max-width: var(--content-width-large);
        margin-inline: auto;

        display: flex;
        flex-flow: row;
        list-style: none;
        padding-left: 0;
        gap: 0.5rem;
        font-size: 2rem;
        color: var(--color-brand-blue);
        font-weight: var(--font-weight-bold);

        & > li > a {
            color: var(--color-brand-blue);
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

/* Stay centered while the 112rem row still has gutters, then pin to the same minimum inline
   padding the content components use.

   The thresholds this replaces were written against 144rem, which is not this row's width: the
   first fired below 1442px and so knocked the centering out on effectively every desktop, which
   left the breadcrumbs hard against the page edge while the components beside them stayed
   centered. 112rem = the max-width above, 4rem = minimum-inline-padding. */
@container breadcrumbs-container (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.breadcrumbs-wrapper) {
        :where(.breadcrumbs) {
            margin-inline: var(--minimum-inline-padding);
        }
    }
}