.wrapper {
  padding-left: $grid-margin--s;
  padding-right: $grid-margin--s;
  margin: 0 auto;
  max-width: $wrapper-width;
  // viewport m
  @include viewport--m {
    padding-left: $grid-margin--m;
    padding-right: $grid-margin--m;
  }
  // viewport l
  @include viewport--l {
    padding-left: $grid-margin--l;
    padding-right: $grid-margin--l;
  }
}

// full bleed : breaks content out of wrapper container
.full-bleed {
  // viewport m - l
  @include viewport--l('inversed') {
    &--m {
      @include full-bleed('m');
    }
  }
  // viewport s - m
  @include viewport--m('inversed') {
    &--s {
      @include full-bleed('s');
    }
  }
}