$gap:              rem-calc(20);
$gap--mobile:      rem-calc(10);
//Columns
$columns--mobile:  12;
$columns--desktop: 12;
$columns-max-width: rem-calc(80);

//mobile negative space
$margin--mobile:   0;

//desktop negative space
$margin--desktop:  0;

%full-grid__content {

  > * {
    grid-column: 2 / -2;
  }
}

%full-grid__entry {

  > * {
    grid-column: 2 / -2;

    @include breakpoint($small-up) {
      grid-column: 4 / -4;
    } // $small-up
  }
}

%grid-columns {
  @include grid($columns--mobile, $position: #{2} / #{-2}, $gap: $gap--mobile);

  @include breakpoint($small-up) {
    @include grid($columns--desktop, $position: #{2} / #{-2});
  } // $small-up
}

%full-grid {
  @include grid($columns--mobile, $margin: $margin--mobile, $position: #{1} / #{-1}, $gap: $gap--mobile);

  @include breakpoint($small-up) {
    @include grid($columns--desktop, $margin: $margin--desktop);
  } // $small-up

  @include breakpoint($large-up) {
    grid-template-columns: 1fr repeat($columns--desktop, $columns-max-width) 1fr;
  } // $large-up
}

%full-width {
  grid-column: 1 / -1;

  &--padded {
    padding: 0 rem-calc(20);
  }

  @include breakpoint($small-up) {

    &--padded {
      padding: 0 (rem-calc(60) + rem-calc(16)); // outside margin + gap width
    }
  } // $small-up
}

.container {
  @extend %full-grid;
  @extend %full-grid__content;
}