@use "sass:map";

//
// Columned list
//

.list-cols {
    column-count: 1;
    column-gap: $grid-gutter-width;

    > li {
        break-inside: avoid;
    }

    @for $i from 1 through $grid-columns {
        &.list-cols-#{$i} {
            column-count: $i;
        }
    }

    @each $breakpoint in map.keys($grid-breakpoints) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
            @for $i from 1 through $grid-columns {
                &.list-cols#{$infix}-#{$i} {
                    column-count: $i;
                }
            }
        }
    }
}