grid.less

@gutter: 8px;

.Row {

  display: flex;
  max-width: 1170px;
  margin: 0 auto;
  flex-wrap: wrap;

  @media screen and (max-width: 640px) {
    flex-direction: column;
  }  

  .Row {
    margin: 0 (-1px * @gutter);
  }
}

.Column {
  flex: 1;
  padding: 0 @gutter;
  box-sizing: border-box;
}

.generate-columns(12);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .desktop-@{i} {
    min-width: (100% / (12/@i));
    max-width: (100% / (12/@i));
  }

  @media screen and (max-width: 640px) {
    .mobile-@{i} {
      min-width: (100% / (12/@i));
      max-width: (100% / (12/@i));
    }  
  }

  .generate-columns(@n, (@i + 1));
}