// Example Grid
.test-grid { background:@silver; .margin-bottom(1); 
	li {  min-height: 3rem; background: @gray; }
}


.hybrid-14 > li { .column(1, 14); }


.nest-example {
  
  .left{ .row(6); // .row is used to nest grids | .row(#); => The # is the number of columns of parent container 
    	li { .column(2, 6); background: darken(@gray, 15%); }
	}
	
	.right{ .row(6); // .row is used to nest grids | .row(#); => The # is the number of columns of parent container 
		li { .column(1.2, 6); background: darken(@gray, 15%); }
	}
}


// Adds a label in the top-left corner that displays the current media query state.
// body {
//     &:after { 
//     padding: .5em 1em;
//     background: @black;
//     color: @white;
//     content: "undefined";
//     .opacity(1);
//     text-align: center;
//     position: fixed;top: 0; left: 0; z-index: 1000;
   
//     @media @mobile-sm {
//       background: @yellow;
//       content: "mobile-sm";
//     }
//     @media @mobile {
//       background: @orange;
//       content: "mobile";
//     }
//     @media @tablet {
//       background: @red;
//       content: "tablet";
//     }
//     @media @desktop {
//       background: @fuchsia;
//       content: "desktop";
//     }
//     @media @desktop-lg {
//       background: @purple;
//       content: "desktop-lg";
//     }
//   }
// }