.grid {
  display: flex;
}

.grid.is-top {
  align-items: flex-start;
}

.grid.is-baseline {
  align-items: baseline;
}

.grid.is-middle {
  align-items: center;
}

.grid.is-bottom {
  align-items: flex-end;
}

.grid.is-center {
  justify-content: center;
}

.grid.is-right {
  justify-content: flex-end;
}

.grid.is-between {
  justify-content: space-between;
}

.grid.is-around {
  justify-content: space-around;
}

.grid.is-reverse {
  flex-direction: row-reverse;
}

.grid:where(:not(.is-nowrap)) {
  flex-wrap: wrap;
}

.grid.is-stretch > .column {
  display: flex;
}

.grid {
  --grid-gap-y: 0;
  --grid-gap-x: 0;
}

.grid.is-gap-xxl {
  --grid-gap-y: 28px;
  --grid-gap-x: 28px;
}

.grid.is-gap-xl {
  --grid-gap-y: 24px;
  --grid-gap-x: 24px;
}

.grid.is-gap-lg {
  --grid-gap-y: 20px;
  --grid-gap-x: 20px;
}

.grid.is-gap-md,
.grid.is-gap {
  --grid-gap-y: 16px;
  --grid-gap-x: 16px;
}

.grid.is-gap-sm {
  --grid-gap-y: 12px;
  --grid-gap-x: 12px;
}

.grid.is-gap-xs {
  --grid-gap-y: 8px;
  --grid-gap-x: 8px;
}

.grid.is-gap-xxs {
  --grid-gap-y: 4px;
  --grid-gap-x: 4px;
}

.grid.is-gap-y-xxl,
.grid:is(.is-gap-vertical-xxl, .is-gap-row-xxl) {
  --grid-gap-y: 28px;
}

.grid.is-gap-y-xl,
.grid:is(.is-gap-vertical-xl, .is-gap-row-xl) {
  --grid-gap-y: 24px;
}

.grid.is-gap-y-lg,
.grid:is(.is-gap-vertical-lg, .is-gap-row-lg) {
  --grid-gap-y: 20px;
}

.grid.is-gap-y-md,
.grid:is(.is-gap-vertical-md, .is-gap-row-md),
.grid:is(.is-gap-vertical, .is-gap-row) {
  --grid-gap-y: 16px;
}

.grid.is-gap-y-sm,
.grid:is(.is-gap-vertical-sm, .is-gap-row-sm) {
  --grid-gap-y: 12px;
}

.grid.is-gap-y-xs,
.grid:is(.is-gap-vertical-xs, .is-gap-row-xs) {
  --grid-gap-y: 8px;
}

.grid.is-gap-y-xxs,
.grid:is(.is-gap-vertical-xxs, .is-gap-row-xxs) {
  --grid-gap-y: 4px;
}

.grid.is-gap-x-xxl,
.grid:is(.is-gap-horizontal-xxl, .is-gap-column-xxl) {
  --grid-gap-x: 28px;
}

.grid.is-gap-x-xl,
.grid:is(.is-gap-horizontal-xl, .is-gap-column-xl) {
  --grid-gap-x: 24px;
}

.grid.is-gap-x-lg,
.grid:is(.is-gap-horizontal-lg, .is-gap-column-lg) {
  --grid-gap-x: 20px;
}

.grid.is-gap-x-md,
.grid:is(.is-gap-horizontal-md, .is-gap-column-md),
.grid:is(.is-gap-horizontal, .is-gap-column) {
  --grid-gap-x: 16px;
}

.grid.is-gap-x-sm,
.grid:is(.is-gap-horizontal-sm, .is-gap-column-sm) {
  --grid-gap-x: 12px;
}

.grid.is-gap-x-xs,
.grid:is(.is-gap-horizontal-xs, .is-gap-column-xs) {
  --grid-gap-x: 8px;
}

.grid.is-gap-x-xxs,
.grid:is(.is-gap-horizontal-xxs, .is-gap-column-xxs) {
  --grid-gap-x: 4px;
}

.grid:is(.is-gap, [class*="is-gap-"]) {
  row-gap: var(--grid-gap-y);
  margin-left: calc(var(--grid-gap-x) * -1);
}

.grid:is(.is-gap, [class*="is-gap-"]) > .column {
  padding-left: var(--grid-gap-x);
}