// 🎌 ADAPTIVE GRID MIXINS AND FUNCTIONS 🎌


// 🎌 WIDTHS IN PIXELS 🎌

$font-size: 10px;    
$column: 48px; 
$gutter: 24px; 

// 🎌 COLUMN WIDTHS AS VARIABLES 🎌

$cols1: ( 1 * ($column + $gutter) - $gutter);
$cols2: ( 2 * ($column + $gutter) - $gutter);
$cols3: ( 3 * ($column + $gutter) - $gutter);
$cols4: ( 4 * ($column + $gutter) - $gutter);
$cols5: ( 5 * ($column + $gutter) - $gutter);
$cols6: ( 6 * ($column + $gutter) - $gutter);
$cols7: ( 7 * ($column + $gutter) - $gutter);
$cols8: ( 8 * ($column + $gutter) - $gutter);
$cols9: ( 9 * ($column + $gutter) - $gutter);
$cols10: (10 * ($column + $gutter) - $gutter);
$cols11: (11 * ($column + $gutter) - $gutter);
$cols12: (12 * ($column + $gutter) - $gutter);
$cols13: (13 * ($column + $gutter) - $gutter);
$cols14: (14 * ($column + $gutter) - $gutter);
$cols15: (15 * ($column + $gutter) - $gutter);
$cols16: (16 * ($column + $gutter) - $gutter);

// 🎌 MIXIN FUNCTION FOR SETING THE WIDTH, IN COLUMNS, OF AN OBJECT 🎌
// 🎌 E.G. @INCLUDE WIDTH(4); 🎌

@mixin width ($cols:1) {
  width: ($cols * ($column + $gutter) - $gutter);
}
@mixin full-width ($cols:1){
  width: ($cols * ($column + $gutter));
}
@mixin min-width ($cols:1) {
  width: ($cols * ($column + $gutter) - $gutter);
}
