/*!
 * GRRR - CSS Grid System
 * Copyright (c) 2024 Atonal Studio
 * Licensed under the MIT License
 * For details, see: https://github.com/atonalstudio/grrr
 */
@property --_grrr-canvas-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.grrr {
  --_grrr-canvas-width: 100cqw;
  display: grid;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  grid-column: 1/-1;
  align-content: start;
  width: 100%;
  container-type: inline-size;
  --_grrr-cols: var(--grrr-cols, 12);
  --_grrr-gutter: var(--grrr-gutter, 18px);
  --_grrr-col-width: var(--grrr-col-width, 84px);
  --_grrr-col-flex-width: var(--grrr-fluid-col, minmax(0, var(--_grrr-col-width)));
  --_grrr-margin-left: var(--grrr-margin-left, var(--grrr-margin, 20px));
  --_grrr-margin-right: var(--grrr-margin-right, var(--grrr-margin, 20px));
  --_grrr-off-left: var(--grrr-off-left, var(--grrr-off, minmax(0, 1fr)));
  --_grrr-off-right: var(--grrr-off-right, var(--grrr-off, minmax(0, 1fr)));
  --_grrr-gutters-total-width: calc(var(--_grrr-gutter) * (var(--_grrr-cols) - 1));
  --_grrr-margins-total-width: calc(var(--_grrr-margin-left) + var(--_grrr-margin-right));
  --_grrr-board-width: calc(var(--grrr-canvas-width, var(--_grrr-canvas-width)) - (var(--_grrr-margins-total-width) + var(--_grrr-gutters-total-width)));
  --grrr-use-col-responsive-width: calc( var(--_grrr-board-width) / var(--_grrr-cols) );
  --grrr-use-col-width: min(
  	var(--_grrr-col-width),
  	var(--grrr-use-col-responsive-width)
  );
  --grrr-unstill: var(--_grrr-col-flex-width);
  --grrr-use-fluid-col: minmax(0, 1fr);
  --grrr-use-board-fluid-width: calc(var(--grrr-canvas-width, var(--_grrr-canvas-width)) - var(--_grrr-margins-total-width));
  --grrr-use-board-width: min(
  	var(--grrr-use-board-fluid-width),
  	calc(var(--_grrr-cols) * var(--_grrr-col-width) + var(--_grrr-gutters-total-width))
  );
  --grrr-use-off-total-width: max(0px, calc(
  	var(--grrr-canvas-width, var(--_grrr-canvas-width)) - var(--_grrr-margins-total-width) - var(--grrr-use-board-width)
  ));
  --grrr-use-off-width: calc(var(--grrr-use-off-total-width) / 2);
}
.grrr--still {
  --_grrr-still-start: var(--grrr-still-start, 3);
  --_grrr-still-end: var(--grrr-still-end, 10);
  --_grrr-still-cols: calc(var(--_grrr-still-end) - var(--_grrr-still-start) + 1);
  --_grrr-still-col-width: calc((100% - (var(--_grrr-margins-total-width) + var(--_grrr-gutter) * (var(--_grrr-still-cols) - 1))) / var(--_grrr-still-cols));
  --_grrr-still-col-flex-width: min(var(--_grrr-still-col-width), var(--_grrr-col-width));
  --_grrr-still-col: var(--grrr-still, min(var(--_grrr-still-col-width), var(--_grrr-col-width)));
}

.grrr {
  grid-template-columns: [full-start margin-start] var(--_grrr-margin-left) [margin-end off-start] var(--_grrr-off-left) [off-end board-start col-start] repeat(calc(var(--_grrr-cols) - 1), var(--_grrr-col-flex-width) [col-end gutter-start] var(--_grrr-gutter) [gutter-end col-start]) var(--_grrr-col-flex-width) [col-end board-end off-start] var(--_grrr-off-right) [off-end margin-start] var(--_grrr-margin-right) [margin-end full-end];
}
.grrr--fluid {
  --grrr-off: 0;
  --grrr-fluid-col: var(--grrr-use-fluid-col);
}
.grrr--still {
  --grrr-use-still-area: col-start var(--_grrr-still-start) / col-end var(--_grrr-still-end);
  grid-template-columns: [full-start margin-start] var(--_grrr-margin-left) [margin-end off-start] var(--_grrr-off-left) [off-end board-start col-start] repeat(calc(var(--_grrr-still-start) - 1), var(--_grrr-col-flex-width) [col-end gutter-start] minmax(0, var(--_grrr-gutter)) [gutter-end col-start]) repeat(calc(var(--_grrr-still-cols) - 1), var(--_grrr-still-col) [col-end gutter-start] var(--_grrr-gutter) [gutter-end col-start]) var(--_grrr-still-col) [col-end gutter-start] repeat(calc(var(--_grrr-cols) - var(--_grrr-still-end)), minmax(0, var(--_grrr-gutter)) [gutter-end col-start] var(--_grrr-col-flex-width) [col-end gutter-start]) [col-end board-end off-start] var(--_grrr-off-right) [off-end margin-start] var(--_grrr-margin-right) [margin-end full-end];
}
.grrr--still--from-first {
  --_grrr-still-start: 1 !important;
  grid-template-columns: [full-start margin-start] var(--_grrr-margin-left) [margin-end off-start] var(--_grrr-off-left) [off-end board-start col-start] repeat(calc(var(--_grrr-still-cols) - 1), var(--_grrr-still-col) [col-end gutter-start] var(--_grrr-gutter) [gutter-end col-start]) var(--_grrr-still-col) [col-end gutter-start] repeat(calc(var(--_grrr-cols) - var(--_grrr-still-end)), minmax(0, var(--_grrr-gutter)) [gutter-end col-start] var(--_grrr-col-flex-width) [col-end gutter-start]) [col-end board-end off-start] var(--_grrr-off-right) [off-end margin-start] var(--_grrr-margin-right) [margin-end full-end];
}
.grrr--still--to-last:not(.grrr--still--from-first) {
  --_grrr-still-end: var(--_grrr-cols) !important;
  grid-template-columns: [full-start margin-start] var(--_grrr-margin-left) [margin-end off-start] var(--_grrr-off-left) [off-end board-start col-start] repeat(calc(var(--_grrr-still-start) - 1), var(--_grrr-col-flex-width) [col-end gutter-start] minmax(0, var(--_grrr-gutter)) [gutter-end col-start]) repeat(calc(var(--_grrr-still-cols) - 1), var(--_grrr-still-col) [col-end gutter-start] var(--_grrr-gutter) [gutter-end col-start]) var(--_grrr-still-col) [col-end board-end off-start] var(--_grrr-off-right) [off-end margin-start] var(--_grrr-margin-right) [margin-end full-end];
}
.grrr--still--off {
  --grrr-still: var(--grrr-unstill);
}
.grrr--inherit {
  display: inherit;
  grid-column: inherit;
  grid-template-columns: inherit;
  margin-inline: inherit;
  grid-auto-rows: inherit;
  grid-auto-flow: inherit;
  align-content: inherit;
  width: inherit;
}
.grrr--unset {
  display: unset;
  grid-column: unset;
  grid-template-columns: unset;
  margin-inline: unset;
  grid-auto-rows: unset;
  grid-auto-flow: unset;
  align-content: unset;
  width: unset;
}