/// This will define a set number of grid columns where each column width can be 
/// modified individually using a numbered column custom property
/// @example minmax(0, var(--column-1-width, var(--column-width))) 
///          minmax(0, var(--column-2-width, var(--column-width))) 
///          minmax(0, var(--column-3-width, var(--column-width))) 
///          minmax(0, var(--column-4-width, var(--column-width))) 
///          minmax(0, var(--column-5-width, var(--column-width))) 
///          minmax(0, var(--column-6-width, var(--column-width)))
@function numbered-columns($column-count : 6) {

  $grid-columns-numbered : '';

  @for $i from 1 through $column-count {
    $grid-columns-numbered : $grid-columns-numbered + ' ' + var(--grid-column-#{$i}-width, minmax(0, var(--grid-column-width)));
  }

  @return $grid-columns-numbered;

}

@mixin inherit() {
  display       : inherit;
  grid          : inherit;
  grid-gap      : inherit;
  align-content : inherit;
}