$agrid-column-system: 12;
$agrid-breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
) !default;

.agrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--agrid-gap, 0.25rem);
  padding-inline: var(--agrid-x-padding, 0px);
  margin-inline: var(--agrid-x-margin, 0px);
}

@media (min-width: 768px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-md, 0.75rem);
  }
}

@media (min-width: 992px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-lg, 1rem);
  }
}

@media (min-width: 1200px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-xl, 1.5rem);
  }
}