// You want to customize the grid?
// Put your variables before the import in order to override the 
// default settings.

$grid-columns: 24;
$grid-gutter-width: 10px 20px 40px; // Responsive gutter width
$grid-outer-margin: 0.625rem 1.125rem; // Responsive outer margin

@import "~@gridonic/grid";

@import "../path-to-your-node_modules/@gridonic/grid";

// Set the number of columns you want to use in your layout.
$grid-columns: 12;

// Set the gutter size between columns. You may provide a list of
// values for each breakpoint.
//
// If there are more breakpoints than values in your list, the last
// value will be used for all remaining breakpoints.
$grid-gutter-width: 30px;

// Set a margin for the container sides. This may also be a list of
// values. See gutter width for explanation.
$grid-outer-margin: 15px;

// Set the breakpoints for the grid. You should always provide at
// least one breakpoint without a resolution. This one will be used for
// naming of the initial classes.
$grid-breakpoints: (
    xs: null,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
);

// Set the maximum width for the container. There is a class
// modifier available to disable the maximum width in case you don’t
// need it. See the official documentation for details.
$grid-max-width: 1440px;

// Set the prefix for all grid related classes. Use this in case you
// have conflicting class names.
$grid-classes-prefix: "grid-";