//
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
  .container-fixed();
  @media (min-width: @screen-xxxs-min) {
    width: 90%;
  }
  @media (min-width: @screen-xxs-min) {
    width: 90%;
  }
  @media (min-width: @screen-xs-min) {
    width: 90%;
  }
  @media (min-width: @screen-sm-min) {
    width: 90%;
  }
  @media (min-width: @screen-md-min) {
    width: 90%;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
  .container-fixed();
}

// Row
//
// Rows contain and clear the floats of your columns.
.row {
  .make-row();
}

// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();
@md: ~"@{grid-prefix}-md";
@xxxs: ~"@{grid-prefix}-xxxs";
@xxs: ~"@{grid-prefix}-xxs";
@xs: ~"@{grid-prefix}-xs";
@sm: ~"@{grid-prefix}-sm";
@lg: ~"@{grid-prefix}-lg";
@media (min-width: @screen-xxxs-min) and (max-width: @screen-lg-max) {
  .make-grid(@md);
}

@media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
  .make-grid(@xxxs);
}

@media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
  .make-grid(@xxs);
}

@media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
  .make-grid(@xs);
}

@media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
  .make-grid(@sm);
}

// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
  .make-grid(@md);
}

@media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
  .make-grid(@lg);
}
