.text-columns {
  column-gap: $column-gap;
  column-width: $column-width;
  margin-bottom: em($line-height-base / 2);
}

.text-columns-narrow    { column-width: $column-width-narrow;    }
.text-columns-narrower  { column-width: $column-width-narrower;  }
.text-columns-narrowest { column-width: $column-width-narrowest; }

@for $i from 2 through 5 {
  .text-columns-max-#{$i} {
    column-count: #{$i};
  }
}

.text-columns li {
  break-inside: avoid; // Avoid splitting list items across columns
}

.text-columns > *:last-child {
  // Prevents uneven distribution of columns
  // See https://avvojira.atlassian.net/browse/UI-225
  margin-bottom: 0;
}