/**************************************************
    >>  Grid  <<
**************************************************/
//Set responsive browser widths in pixels
$laptop: 1000px;
$tablet: 780px;
$phone: 480px;

//Set the grid's row's padding
$row_padding: 1.5em 0; //Any valid css for padding

.row {
  display: block;
  box-sizing: border-box;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}
.column { 
  display: block;
  box-sizing: border-box;
  float: left;
  padding: $row_padding;
}
.col-1  { width: 8.333%; }
.col-2  { width: 16.666%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333%; }
.col-5  { width: 41.666%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333%; }
.col-8  { width: 66.666%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333%; }
.col-11 { width: 91.666%; }
.col-12 { width: 100%; }

@media screen and (max-width: $laptop) {
  .l-0  { display: none; }
  .l-1  { width: 8.333%; }
  .l-2  { width: 16.666%; }
  .l-3  { width: 25%; }
  .l-4  { width: 33.333%; }
  .l-5  { width: 41.666%; }
  .l-6  { width: 50%; }
  .l-7  { width: 58.333%; }
  .l-8  { width: 66.666%; }
  .l-9  { width: 75%; }
  .l-10 { width: 83.333%; }
  .l-11 { width: 91.666%; }
  .l-12 { width: 100%; }
}

@media screen and (max-width: $tablet) {
  .t-0  { display: none; }
  .t-1  { width: 8.333%; }
  .t-2  { width: 16.666%; }
  .t-3  { width: 25%; }
  .t-4  { width: 33.333%; }
  .t-5  { width: 41.666%; }
  .t-6  { width: 50%; }
  .t-7  { width: 58.333%; }
  .t-8  { width: 66.666%; }
  .t-9  { width: 75%; }
  .t-10 { width: 83.333%; }
  .t-11 { width: 91.666%; }
  .t-12 { width: 100%; }
}

@media screen and (max-width: $phone) {
  .p-0  { display: none; }
  .p-1  { width: 8.333%; }
  .p-2  { width: 16.666%; }
  .p-3  { width: 25%; }
  .p-4  { width: 33.333%; }
  .p-5  { width: 41.666%; }
  .p-6  { width: 50%; }
  .p-7  { width: 58.333%; }
  .p-8  { width: 66.666%; }
  .p-9  { width: 75%; }
  .p-10 { width: 83.333%; }
  .p-11 { width: 91.666%; }
  .p-12 { width: 100%; }
}