@layer components {
    nav.subnav {
        border: solid var(--size--border) var(--color--border);
        margin-bottom: var(--space-xl);

        font-family: var(--font--title--family--xxsmall--all-caps);
        font-size: var(--font--title--size--xxsmall--all-caps);
        font-weight: var(--font--title--weight--xxsmall--all-caps);
        line-height: var(--font--title--line-height--xxsmall--all-caps);
        letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
        text-transform: var(--font--title--casing--xxsmall--all-caps);

        & ul {
            width: 100%;
            list-style-type: none;
            display: flex;
            flex-direction: column;
            justify-content: stretch;

            margin: 0;
            column-gap: 0;
        }

        & li {
            flex-grow: 1;
            text-align: center;

            &:not(:first-child) {
                border-top: solid var(--size--border) var(--color--border);
            }

            &.active {
                background-color: var(--color--brand--highlight);

                & a {
                    text-decoration: none;
                }
            }
        }

        & a {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            padding: var(--space-xs);
        }
    }

    @media screen and (min-width: 600px) {
        nav.subnav ul {
            flex-direction: row;
            & li:not(:first-child) {
                border-left: solid var(--size--border) var(--color--border);
                border-top: none;
            }
        }
    }
}