//// /// Layout ////
$layout-max-width: 40em !default; $column-gutter: $base-em; $column-number: 4 !default;
// Page & Wrapper // ————————-
.page {
padding-bottom: $base-line*4;
}
.page, .wrapper {
margin-right: auto; margin-left: auto; max-width: 100%;
}
.wrapper {
padding-right: $base-line; padding-left: $base-line; max-width: $layout-max-width;
}
// Grid // ————————-
@mixin grid($column-number:$column-number, $column-gutter:$column-gutter) {
display: grid; grid-template-columns: repeat(auto-fill, minmax($layout-max-width/($column-number+1), 1fr)); grid-gap: 2vmin; margin-bottom: $base-line;
}
.grid {
@include grid();
}