// Styleguide layout-container

.l-constrained {
  @extend %clearfix;
  max-width: $mq-xl;
  margin: 0 auto;
}

// Layout 1 column full width
//
// Styleguide layout-1col

.l-1col {
  @include column(12);
}

// Layout 2 columns
//
// Styleguide layout-2col

.l-2col-side {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(4);
  }
}

.l-2col-main {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(8);
  }
}

.l-2col-even {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(6);
  }
}

// Layout split
//
// Styleguide layout-split

.l-split-start {
  @include column(6);
}

.l-split-end {
  float: right;
}

// Styleguide layout-container

.l-constrained {
  @extend %clearfix;
  max-width: $mq-xl;
  margin: 0 auto;
  padding: 0 2%;

  @include respond-to($mq-l) {
    padding: 0;
  }
}

// Layout 1 column full width
//
// Styleguide layout-1col

.l-1col {
  @include column(12);
}

// Layout 2 columns
//
// Styleguide layout-2col

.l-2col-side {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(4);
  }
}

.l-2col-main {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(8);
  }
}

.l-2col-even {
  @include column(12);
  @include respond-to($mq-m) {
    @include column(6);
  }
}

// Layout split
//
// Styleguide layout-split

.l-split-start {
  @include column(6);
}

.l-split-end {
  float: right;
}

Add padding to the mobile view
Add padding to the mobile view
