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

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

$columns-small:   4;
$columns-medium:  8;
$columns-large:   12;

$grid-padding-small:   1em;
$grid-padding-medium:  50px 100px;
$grid-padding-large:   100px;

$column-width:  60px;
$gutter-width:  30px;
$grid-padding:  $grid-padding-small;
$total-columns: $columns-small;
@include grid-init();

// Defining media query breakpoints
$breakpoint-medium: set-breakpoint( $min: grid-width( $columns-medium, $grid-padding-medium ) );
$breakpoint-large:  set-breakpoint( $min: grid-width( $columns-large, $grid-padding-large ), $legacy-support: true ); // Support for legacy browsers

// Defining layouts
$layout-small:  set-layout( $total-columns, $grid-padding );
$layout-medium: set-layout( $columns-medium, $grid-padding-medium, $breakpoint-medium );
$layout-large:  set-layout( $columns-large, $grid-padding-large, $breakpoint-large );

.page {
  @include each-layout {
    @include master;
  }
}

.grid {
  @include each-layout {
    @include container;
  }
}

.column {
  @include span-columns( 4 );
  @include at-layout( $layout-medium ) {
    @include span-columns( 4 );
  }
  @include at-layout( $layout-large ) {
    @include span-columns( 4 );
  }
}