// ---------------------------------------------------------------------------
// Imports

@import "layout";

/* -------------------------------------------------------------------------*/
/* Layout: mobile first */

body {
  margin: 0;
  padding: 0;
}

.page {
  @include master( $columns-large ); // Sets max-width
  padding: {
    left: $gutter-width / 2;
    right: $gutter-width / 2;
  }
}

.grid {
  @include container( $columns-small );
  @include at-breakpoint( $breakpoint-medium ) {
    @include container( $columns-medium, $at-breakpoint: true );
  }
  @include at-breakpoint( $breakpoint-large ) {
    @include container( $columns-large, $at-breakpoint: true );
  }
}

.column {
  @include span-columns( 4, $context: $columns-small);
  @include at-breakpoint( $breakpoint-medium ) {
    @include span-columns( 4, $context: $columns-medium, $at-breakpoint: true);
  }
  @include at-breakpoint( $breakpoint-large ) {
    @include span-columns( 4, $context: $columns-large, $at-breakpoint: true);
  }
}