// You can place these variable definitions on a wrapper/container class instead of :root.
// For example, use `.container-grid` as the scope for your grid system variables.

.container-grid .col {
  box-sizing: border-box;
  flex-grow: var(--col-grow);
  order: var(--col-order);
  padding: calc(var(--col-gutter) / 2);
  margin-left: calc(100% / var(--col-columns) * var(--col-offset));
  flex-basis: calc(100% / var(--col-columns) * var(--col-span));
  flex-shrink: 0;
  width: auto;
  width: calc(100% / var(--col-columns) * var(--col-span));
  max-width: calc(100% / var(--col-columns) * var(--col-span));

  @container (min-width: theme('screens.xs')) {
    order: var(--col-order-xs);
    padding: calc(var(--col-gutter-xs) / 2);
    margin-left: calc(100% / var(--col-columns) * var(--col-offset-xs));
    flex-basis: calc(100% / var(--col-columns) * var(--col-span-xs));
    max-width: calc(100% / var(--col-columns) * var(--col-span-xs));
  }

  @container (min-width: theme('screens.sm')) {
    order: var(--col-order-sm);
    padding: calc(var(--col-gutter-sm) / 2);
    margin-left: calc(100% / var(--col-columns) * var(--col-offset-sm));
    flex-basis: calc(100% / var(--col-columns) * var(--col-span-sm));
    max-width: calc(100% / var(--col-columns) * var(--col-span-sm));
  }

  @container (min-width: theme('screens.md')) {
    order: var(--col-order-md);
    padding: calc(var(--col-gutter-md) / 2);
    margin-left: calc(100% / var(--col-columns) * var(--col-offset-md));
    flex-basis: calc(100% / var(--col-columns) * var(--col-span-md));
    max-width: calc(100% / var(--col-columns) * var(--col-span-md));
  }

  @container (min-width: theme('screens.lg')) {
    order: var(--col-order-lg);
    padding: calc(var(--col-gutter-lg) / 2);
    margin-left: calc(100% / var(--col-columns) * var(--col-offset-lg));
    flex-basis: calc(100% / var(--col-columns) * var(--col-span-lg));
    max-width: calc(100% / var(--col-columns) * var(--col-span-lg));
  }

  @container (min-width: theme('screens.xl')) {
    order: var(--col-order-xl);
    padding: calc(var(--col-gutter-xl) / 2);
    margin-left: calc(100% / var(--col-columns) * var(--col-offset-xl));
    flex-basis: calc(100% / var(--col-columns) * var(--col-span-xl));
    max-width: calc(100% / var(--col-columns) * var(--col-span-xl));
  }
}
