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

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

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

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

.grid {
  @include container( $total-columns );
}

/* -------------------------------------------------------------------- *
 * Grid columns: not using grid-init()
 */

.span-columns-2 {
  @include span-columns( 2, $context: $total-columns );
}

.span-columns-4 {
  @include span-columns( 4, $context: $total-columns );
}

.span-columns-6 {
  @include span-columns( 6, $context: $total-columns );
}

/* -------------------------------------------------------------------- *
 * Grid columns: using grid-init()
 */

@include grid-init();

.span-columns-2 {
  @include span-columns( 2, $context: $total-columns );
}

.span-columns-4 {
  @include span-columns( 4, $context: $total-columns );
}

.span-columns-6 {
  @include span-columns( 6, $context: $total-columns );
}

/* -------------------------------------------------------------------- *
 * Grid colum spanning more columns than layout
 */

.span-columns-18 {
  @include span-columns( 18, $context: $total-columns );
}