@import '../../style_config/config.scss';

// Grid

/*
Containers

Use containers when you need a content area that has standard maximum width and centered on the page.

Markup:
<div class="container {modifier_class}}">Container</div>

.container          - Default container size = $container-width
.container--sm      - Small Container
.container--lg      - Large Container
*/

// Column
.col {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

.row {
  @include grid-system(full);
  @include grid-system(wlg);
  @include grid-system(lg);
  @include grid-system(wmd);
  @include grid-system(wmd);
  @include grid-system(md);
  @include grid-system(sm);
}


  .col {
    margin-left: $column-margin;

    &:first-child {
      margin-left: 0;
    }
 
  }

  .col--1 {
    width: grid-column-width(1);
  }

  .col--2 {
    width: grid-column-width(2);
  }

  .col--3 {
    width: grid-column-width(3);
  }

  .col--4 {
    width: grid-column-width(4);
  }

  .col--5 {
    width: grid-column-width(5);
  }

  .col--6 {
    width: grid-column-width(6);
  }

  .col--7 {
    width: grid-column-width(7);
  }

  .col--8 {
    width: grid-column-width(8);
  }

  .col--9 {
    width: grid-column-width(9);
  }

  .col--10 {
    width: grid-column-width(10);
  }

  .col--11 {
    width: grid-column-width(11);
  }

  .col--12 {
    width: 100%;
    margin-left: 0;
  }

  // Shortcut  Offsets: 1/3, 2/3, 1/2
  .col--1-3 {
    width: grid-column-width(4);
  }

  .col--2-3 {
    width: grid-column-width(8);
  }

  .col--1-2 {
    width: grid-column-width(6);
  }

  // Offsets
  .col--offset-1 {
    margin-left: grid-offset-length(1) !important;
  }

  .col--offset-2 {
    margin-left: grid-offset-length(2) !important;
  }

  .col--offset-3 {
    margin-left: grid-offset-length(3) !important;
  }

  .col--offset-4 {
    margin-left: grid-offset-length(4) !important;
  }

  .col--offset-5 {
    margin-left: grid-offset-length(5) !important;
  }

  .col--offset-6 {
    margin-left: grid-offset-length(6) !important;
  }

  .col--offset-7 {
    margin-left: grid-offset-length(7) !important;
  }

  .col--offset-8 {
    margin-left: grid-offset-length(8) !important;
  }

  .col--offset-9 {
    margin-left: grid-offset-length(9) !important;
  }

  .col--offset-10 {
    margin-left: grid-offset-length(10) !important;
  }

  .col--offset-11 {
    margin-left: grid-offset-length(11) !important;
  }

  // Shortcut  Offsets: 1/3, 2/3, 1/2
  .col--offset-1-3 {
    margin-left: grid-offset-length(4) !important;
  }

  .col--offset-2-3 {
    margin-left: grid-offset-length(8) !important;
  }

  .col--offset-1-2 {
    margin-left: grid-offset-length(6) !important;
  }

// Clearing
//––––––––––––––––––––––––––––––––––––––––––––––––––