@import "partials/reset";
//@import "partials/gridEight";  // < GRID 8 [!]

$defaultHeight: 50px;

//GRID 12 \/
* { box-sizing: border-box; }

// div[class^="col-"] { padding: 15px;}

main {
  margin: 15px 5px;
}

.grid-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;

  .row {
    &::after {
      content: "";
      clear: both;
      display: table;
    }


    .col-1 { width: 8.33%; }
    .col-2 { width: 16.66%; }
    .col-3 { width: 24.99%; }
    .col-4 { width: 33.33%; }
    .col-5 { width: 41.66%; }
    .col-6 { width: 49.99%; }
    .col-7 { width: 58.32%; }
    .col-8 { width: 66.65%; }
    .col-9 { width: 74.98%; }
    .col-10 { width: 83.31%; }
    .col-11 { width: 91.64%; }
    .col-12 { width: 100%; }
  }
}

[class^="col-"] {
  float: left;
  min-height: 1px;
}

.header {
  background-color: lighten(purple, 10%);
  height: $defaultHeight * 2;
}

.left-section {
  background-color: aqua;
  height: 0.7 * $defaultHeight;
  margin-bottom: 10px;
}

.center-section {
  background-color: yellow;
  height: 5 * $defaultHeight;
}

.right-section {
  background-color: aqua;
  height: 5 * $defaultHeight;
}

.footer {
  background-color: darken(aqua, 10%);
  height: $defaultHeight;
}