/// Makes a flex item for evenly spaced grid items.
/// Must be direct child of a Flex Container (recommened to use yoga-container or yoga-outer-container)
///
/// @param {Number [unitless]} $num_col [1]
///   Number of columns wide to span.
/// @param {Number [unitless]} $grid_width [$grid-columns]
///   Number of columns per row.
/// @param {Number [unit]} $gutter_size [$gutter]
///   Gutter for margin left and right around item.
///
/// @example scss - Usage
///   .element {
///     @include yoga-column(6, 12, 10px);
///   }
///
/// @example css - CSS Output
///   .element {
///     flex: 0;
///     margin-left: 10px;
///     margin-right: 10px;
///
///     flex-basis: calc(50% - 20px);
///   }

@mixin yoga-column($num_col: 1, $grid_width: $grid-columns, $gutter_size: $gutter) {
  $percent_wide: $num_col / $grid_width * 100;

  flex: 0;
  margin-left: $gutter_size;
  margin-right: $gutter_size;

  flex-basis: calc(#{$percent_wide}% - #{$gutter_size * 2});
}