@mixin grid($columns, $position: #{1}/#{-1}, $margin: null, $gap: rem-calc(16)) {

  $total-negative-space: $gap * ($columns - 1);
  @if ($margin != null) {
    $total-negative-space: $gap * ($columns + 1) + ($margin * 2);
  }

  display: grid;
  grid-column: $position;
  grid-column-gap: $gap;
  grid-template-columns: $margin repeat($columns, calc((100% - #{$total-negative-space})/#{$columns})) $margin;
}

@mixin calc-free-columns($columns, $screen: 'mobile', $extra: null) {
  // agenda lx grid columns calculator settings
  $gap:           rem-calc(19);
  $total-columns: 6;
  $margin:        rem-calc(20) - $gap;

  @if ($screen == 'desktop') {
    $gap:           rem-calc(16);
    $total-columns: 12;
    $margin:        rem-calc(60) - $gap;
  }

  $extra-width: 0px;

  @if ($extra == 'wide') {
    $extra-width: $gap;
  }

  @if ($extra == 'wider') {
    $extra-width: $gap * 2;
  }

  $total-negative-space: ($margin * 2) + ($gap * ($total-columns + 1));

  // return width
  width: calc(((100% - #{$total-negative-space}) / #{$total-columns}) * #{$columns} + (#{$gap} * (#{$columns} - 1)) + #{$extra-width});
}