/* Breakpoints */
$xxs-breakpoint: 400px;
$xs-breakpoint: 600px;
$sm-breakpoint: 768px;
$md-breakpoint: 1024px;
$ml-breakpoint: 1280px;
$lg-breakpoint: 1440px;
$xl-breakpoint: 1680px;
$xxl-breakpoint: 2500px;

/* z-index */
$z-index-nav-backdrop: -1;
$z-index-sections: 1;
$z-index-nav-main-nav: 1;
$z-index-nav-small-menu: 2;
$z-index-breadcrumb: 2;
$z-index-nav-toggle: 3;
$z-index-gdpr-banner: 14;
$z-index-gdpr-modal: 15;
$z-index-modal: 20;
$z-index-nav: 99;
$z-index-demo-modal: 100;

/* Shared */
/* $box-shadow: 0px 0px 20px 0px rgba(#000, 0.06); */

/* Transition */
$transition-fast: 0.15s;
$transition-mid: 0.3s;
$transition-slow: 0.5s;

/**
 * GRID
 */
/* container */
$container-min-offset: 16px;
$container-tablet-offset: 24px;
$container-laptop-offset: 32px;
$container-desktop-offset: 40px;
$container-max-width: 1840px;
$container-max-width-mq: 1920px; /* when the grid reaches its max width: maxWidth + desktopOffset * 2 */

/*
* GRID LAYOUT
*/
$grid-gap: 12px;
$grid-gap-max: 24px;
$grid-gap-max-mq: $sm-breakpoint; /* approx. when grid-gap reaches grid-gap-max */