/**
 *grid
 */

.grid, .g {
  display: grid;
}

.grid-top, .gt { .vendor(align-items, flex-start); }
.grid-middle, .gm { .vendor(align-items, center); }
.grid-bottom, .gb { .vendor(align-items, flex-end); }

.grid-auto-flow-column {
  grid-auto-flow: column;
}

.for(1 2 3 4 5 6 7 8 9 10 11 12, {
  .grid-col@{value}, .gcol@{value} {
    grid-template-columns: repeat(@value, 1fr);
  }
});
.for(1 2 3 4 5 6 7 8 9 10 11 12, {
  .grid-row@{value}, .grow@{value} {
    grid-template-rows: repeat(@value, 1fr);
  }
});

@media @media-mobile {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .s-grid-col@{value}, .s-gcol@{value} {
      grid-template-columns: repeat(@value, 1fr);
    }
  });
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .s-grid-row@{value}, .s-grow@{value} {
      grid-template-rows: repeat(@value, 1fr);
    }
  });
}

@media @media-tablet {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .m-grid-col@{value}, .m-gcol@{value} {
      grid-template-columns: repeat(@value, 1fr);
    }
  });
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .m-grid-row@{value}, .m-grow@{value} {
      grid-template-rows: repeat(@value, 1fr);
    }
  });
}

@media @media-desktop {
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .l-grid-col@{value}, .l-gcol@{value} {
      grid-template-columns: repeat(@value, 1fr);
    }
  });
  .for(1 2 3 4 5 6 7 8 9 10 11 12, {
    .l-grid-row@{value}, .l-grow@{value} {
      grid-template-rows: repeat(@value, 1fr);
    }
  });
}