﻿:where(.apo-navigation-sitemap) {
    container: apo-sitemap / inline-size;
}

:where(.apo-navigation-sitemap > nav > ul) {
    --_column-count: 1;
    --_column-gap: 1.5rem;
    column-count: var(--_column-count);
    column-gap: var(--_column-gap);

    @container (width > 25rem) {
        --_column-count: 2;
    }

    @container (width > 37.5rem) {
        --_column-count: 3;
    }

    @container (width > 56.25rem) {
        --_column-count: 4;
    }
}

:where(.apo-navigation-sitemap > nav > ul > li) {
    break-inside: avoid;
}

@container apo-sitemap (width > 56.25rem) {
    :where(.apo-navigation-sitemap > nav > ul > li:last-child) {
        break-before: column
    }
}