/*******************************
             Grid
*******************************/

/* Inherited From Site */

// @mobileBreakpoint
// @tabletBreakpoint
// @computerBreakpoint
// @largeMonitorBreakpoint
// @widescreenMonitorBreakpoint

/*******************************
            Grid
*******************************/

@gridMinWidth: 320px;

@gridGutterWidth: 2rem;
@gridRowSpacing: 2rem;

@gridTableWidth: ~"calc(100% + "@gridGutterWidth~")";
@gridColumnMaxImageWidth: 100%;

@gridConsecutiveGridDistance: (@gridRowSpacing / 2);

/*******************************
           Variations
*******************************/

/*--------------
     Relaxed
---------------*/

@gridRelaxedGutterWidth: 3rem;
@gridVeryRelaxedGutterWidth: 5rem;

/*--------------
     Divided
---------------*/

@gridDividedBorder: -1px 0px 0px 0px @borderColor;
@gridVerticallyDividedBorder: 0px -1px 0px 0px @borderColor;

@gridDividedInvertedBorder: -1px 0px 0px 0px @whiteBorderColor;
@gridVerticallyDividedInvertedBorder: 0px -1px 0px 0px @whiteBorderColor;

/*--------------
    Celled
---------------*/

@gridCelledMargin: 1em 0em;
@gridCelledWidth: 1px;
@gridCelledBorderColor: @solidBorderColor;

@gridCelledPadding: 1em;
@gridCelledRelaxedPadding: 1.5em;
@gridCelledVeryRelaxedPadding: 2em;

@gridCelledGridDivider: 0px 0px 0px @gridCelledWidth @gridCelledBorderColor;
@gridCelledRowDivider: 0px (-@gridCelledWidth) 0px 0px @gridCelledBorderColor;
@gridCelledColumnDivider: (-@gridCelledWidth) 0px 0px 0px @gridCelledBorderColor;


/*--------------
    Stackable
---------------*/

@gridStackableRowSpacing: @gridRowSpacing;
@gridStackableGutter: @gridGutterWidth;
@gridStackableMobileBorder: 1px solid @borderColor;
@gridStackableInvertedMobileBorder: 1px solid @whiteBorderColor;


/*******************************
             Legacy
*******************************/

/*--------------
     Page
---------------*/

/* Legacy (DO NOT USE)
 */
@gridMobileWidth: auto;
@gridMobileMargin: 0em;
@gridMobileGutter: 0em;

@gridTabletWidth: auto;
@gridTabletMargin: 0em;
@gridTabletGutter: 2em;

@gridComputerWidth: auto;
@gridComputerMargin: 0em;
@gridComputerGutter: 3%;

@gridLargeMonitorWidth: auto;
@gridLargeMonitorMargin: 0em;
@gridLargeMonitorGutter: 15%;

@gridWidescreenMonitorWidth: auto;
@gridWidescreenMargin: 0em;
@gridWidescreenMonitorGutter: 23%;