/*
  Carbon 2× Grid — geometry only (no IBM taste).
  Mirrors @carbon/styles css-grid: 16 cols, 32px gutter, breakpoint margins.
  sm <672: 4 cols, margin 0
  md ≥672 (42rem): 8 cols, margin 1rem
  lg ≥1056 (66rem): 16 cols
  max ≥1584 (99rem): margin 1.5rem
*/

:root {
  --cds-grid-gutter: 2rem;
  --cds-grid-columns: 4;
  --cds-grid-margin: 0;
}

@media (min-width: 42rem) {
  :root {
    --cds-grid-columns: 8;
    --cds-grid-margin: 1rem;
  }
}

@media (min-width: 66rem) {
  :root {
    --cds-grid-columns: 16;
  }
}

@media (min-width: 99rem) {
  :root {
    --cds-grid-margin: 1.5rem;
  }
}

.cds--css-grid {
  --cds-grid-gutter-start: calc(var(--cds-grid-gutter) / 2);
  --cds-grid-gutter-end: calc(var(--cds-grid-gutter) / 2);
  display: grid;
  grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 99rem;
  padding-inline: var(--cds-grid-margin);
}

.cds--css-grid--full-width {
  max-inline-size: 100%;
}

.cds--css-grid--with-row-gap {
  row-gap: var(--cds-grid-gutter);
}

.cds--css-grid-column {
  margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
  min-width: 0;
}

/* Default: full width of current breakpoint column count */
.cds--css-grid-column {
  grid-column: span var(--cds-grid-columns) / span var(--cds-grid-columns);
}

.cds--col-span-1 { grid-column: span 1 / span 1; }
.cds--col-span-2 { grid-column: span 2 / span 2; }
.cds--col-span-50 { grid-column: span 2 / span 2; } /* sm: half of 4 */
.cds--col-span-3 { grid-column: span 3 / span 3; }
.cds--col-span-4 { grid-column: span 4 / span 4; }
.cds--col-span-5 { grid-column: span 5 / span 5; }
.cds--col-span-6 { grid-column: span 6 / span 6; }
.cds--col-span-7 { grid-column: span 7 / span 7; }
.cds--col-span-8 { grid-column: span 8 / span 8; }
.cds--col-span-9 { grid-column: span 9 / span 9; }
.cds--col-span-10 { grid-column: span 10 / span 10; }
.cds--col-span-11 { grid-column: span 11 / span 11; }
.cds--col-span-12 { grid-column: span 12 / span 12; }
.cds--col-span-13 { grid-column: span 13 / span 13; }
.cds--col-span-14 { grid-column: span 14 / span 14; }
.cds--col-span-15 { grid-column: span 15 / span 15; }
.cds--col-span-16 { grid-column: span 16 / span 16; }
.cds--col-span-100 { grid-column: 1 / -1; }

@media (min-width: 42rem) {
  .cds--md\:col-span-1 { grid-column: span 1 / span 1; }
  .cds--md\:col-span-2 { grid-column: span 2 / span 2; }
  .cds--md\:col-span-3 { grid-column: span 3 / span 3; }
  .cds--md\:col-span-4 { grid-column: span 4 / span 4; }
  .cds--md\:col-span-5 { grid-column: span 5 / span 5; }
  .cds--md\:col-span-6 { grid-column: span 6 / span 6; }
  .cds--md\:col-span-7 { grid-column: span 7 / span 7; }
  .cds--md\:col-span-8 { grid-column: span 8 / span 8; }
  .cds--md\:col-span-100 { grid-column: 1 / -1; }
}

@media (min-width: 66rem) {
  .cds--lg\:col-span-1 { grid-column: span 1 / span 1; }
  .cds--lg\:col-span-2 { grid-column: span 2 / span 2; }
  .cds--lg\:col-span-3 { grid-column: span 3 / span 3; }
  .cds--lg\:col-span-4 { grid-column: span 4 / span 4; }
  .cds--lg\:col-span-5 { grid-column: span 5 / span 5; }
  .cds--lg\:col-span-6 { grid-column: span 6 / span 6; }
  .cds--lg\:col-span-7 { grid-column: span 7 / span 7; }
  .cds--lg\:col-span-8 { grid-column: span 8 / span 8; }
  .cds--lg\:col-span-9 { grid-column: span 9 / span 9; }
  .cds--lg\:col-span-10 { grid-column: span 10 / span 10; }
  .cds--lg\:col-span-11 { grid-column: span 11 / span 11; }
  .cds--lg\:col-span-12 { grid-column: span 12 / span 12; }
  .cds--lg\:col-span-13 { grid-column: span 13 / span 13; }
  .cds--lg\:col-span-14 { grid-column: span 14 / span 14; }
  .cds--lg\:col-span-15 { grid-column: span 15 / span 15; }
  .cds--lg\:col-span-16 { grid-column: span 16 / span 16; }
  .cds--lg\:col-span-100 { grid-column: 1 / -1; }
}