@theme {

    --breakpoint-xs: 360px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-xl: 1440px;

    --spacing-mx-gutter: var(--mx-grid-gutter);
    --spacing-mx-margin: var(--mx-grid-margin);
    --spacing-mx-header: var(--mx-header-height);
    --spacing-mx-sidebar-col: var(--mx-sidebar-collapsed);
    --spacing-mx-sidebar-exp: var(--mx-sidebar-expanded);

    --grid-template-columns-main: repeat(var(--mx-grid-cols), minmax(0, 1fr));
    --max-width-mx-main: var(--mx-grid-max-width);
}