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

@import "../../../sass/ezy";

$column-width: 60px;
$gutter-width: 30px;
$total-columns: 12;

// Widths for use in media queries
$width-small:   context-width( 4 );
$width-medium:  context-width( 8 );
$width-large:   context-width( $total-columns );

// Defining media query breakpoints
$breakpoint-small:  set-breakpoint( $max: $width-small );
$breakpoint-medium: set-breakpoint( $min: $width-small+1 );
$breakpoint-large:  set-breakpoint( $min: $width-medium+1, $legacy-support: true ); // Support for legacy browsers

.page {
  @include master( $total-columns ); // Sets max-width
}

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

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