[data-component-id="pedestal:grid_responsive"] {
  display: grid;
}

.grid_responsive--gap-sm {
  gap: var(--grid-responsive-gap-sm, var(--gap-sm, 0.6rem));
}

.grid_responsive--gap-md {
  gap: var(--grid-responsive-gap-md, var(--gap-md, 1.2rem));
}

.grid_responsive--gap-lg {
  gap: var(--grid-responsive-gap-lg, var(--gap-lg, 2.4rem));
}

.grid_responsive {
  --_column-width: 12rem; // default for column widthm when no width given
  --_column-fit: auto-fit;
}

.grid_responsive--column-xs {
  --_column-width: var(--grid-responsive-column-xs, var(--column-xs, 6rem))
}

.grid_responsive--column-sm {
  --_column-width: var(--grid-responsive-column-sm, var(--column-sm, 10rem))
}

.grid_responsive--column-md {
  --_column-width: var(--grid-responsive-column-md, var(--column-md, 14rem))
}

.grid_responsive--column-lg {
  --_column-width: var(--grid-responsive-column-lg, var(--column-lg, 16rem))
}

.grid_responsive--content-fit {
  --_column-fit: auto-fit;
}

.grid_responsive--content-fill {
  --_column-fit: auto-fill;
}

.grid_responsive--column-fixed,
.grid_responsive:not(.grid_responsive--column-flexible) {
  grid-template-columns: repeat(var(--_column-fit), var(--_column-width));
}

.grid_responsive--column-flexible {
  grid-template-columns: repeat(var(--_column-fit), minmax(var(--_column-width), 1fr));
}