// helper classes for quickly building columns and rows

.row {
  @include row;
}

.container {
  @include outer-container;
}

.one {
  @include span-columns(1);
}

.two {
  @include span-columns(2);
}

.three {
  @include span-columns(3);
}

.four {
  @include span-columns(4);
}

.five {
  @include span-columns(5);
}

.six {
  @include span-columns(6);
}

.seven {
  @include span-columns(7);
}

.eight {
  @include span-columns(8);
}

.nine {
  @include span-columns(9);
}

.ten {
  @include span-columns(10);
}

.eleven {
  @include span-columns(11);
}

.twelve {
  @include span-columns(12);
}

// just make everything full column by default on mobile
.one, .two, .three, .four, .five, .six,

.seven, .eight, .nine, .ten, .eleven, .twelve {
  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

// some default column width definitions

.full {
  @include span-columns(12);
  @include media($laptop-breakpoint) {
    @include span-columns(12);
  }

  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

.small {
  @include media($tablet-breakpoint) {
    @include span-columns(12);
  }

  @include media($laptop-breakpoint) {
    @include span-columns(4);
  }

  @include media($desktop-breakpoint) {
    @include span-columns(3);
  }

  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

.large {
  @include media($tablet-breakpoint) {
    @include span-columns(12);
  }

  @include media($laptop-breakpoint) {
    @include span-columns(8);
  }

  @include media($desktop-breakpoint) {
    @include span-columns(9);
  }

  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

.half {
  @include span-columns(6);
  @include media($laptop-breakpoint) {
    @include span-columns(6);
  }

  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

.third {
  @include span-columns(4);
  @include media($laptop-breakpoint) {
    @include span-columns(4);
  }

  @include media($tablet-breakpoint) {
    @include span-columns(4);
  }

  @include media($mobile-breakpoint) {
    @include span-columns(12);
  }
}

.omega {
  @include omega;
}