@mixin vs-grid() {
  margin: 0 auto;
  box-sizing: border-box;

  $widths: (
    xs: inherit,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
  );

  $page-margin: 1rem * 3;

  @include vs-at-breakpoint(xs) {
    width: map-get($widths, xs);
    padding: 0 $page-margin;
  }

  @include vs-at-breakpoint(sm) {
    width: map-get($widths, sm);
    padding: 0 $page-margin;
  }

  @include vs-at-breakpoint(md) {
    width: map-get($widths, md);
    padding: 0 $page-margin;
  }

  @include vs-at-breakpoint(lg) {
    width: map-get($widths, lg);
    padding: 0 $page-margin;
  }

  @include vs-at-breakpoint(xl) {
    width: map-get($widths, xl);
    padding: 0 $page-margin;
  }
}