.grid { display: grid; }
.grid--inline { display: inline-grid; }

.grid-gp-half { gap: var(--hs-spacing-small); }
.grid-gp-1 { gap: var(--hs-spacing-base); }
.grid-gp-2 { gap: calc(var(--hs-spacing-base) * 2); }
.grid-gp-3 { gap: calc(var(--hs-spacing-base) * 3); }
.grid-gp-4 { gap: calc(var(--hs-spacing-base) * 4); }
.grid-gp-5 { gap: calc(var(--hs-spacing-base) * 5); }
.grid-gp-6 { gap: calc(var(--hs-spacing-base) * 6); }

.grid-ai-normal { align-items: normal; }
.grid-ai-start { align-items: start; }
.grid-ai-end { align-items: end; }
.grid-ai-center { align-items: center; }
.grid-ai-stretch { align-items: stretch; }
.grid-ai-baseline { align-items: baseline; }

.grid-jc-normal { justify-content: normal; }
.grid-jc-start { justify-content: start; }
.grid-jc-end { justify-content: end; }
.grid-jc-center { justify-content: center; }
.grid-jc-baseline { justify-content: baseline; }
.grid-jc-space-between { justify-content: space-between; }
.grid-jc-space-around { justify-content: space-around; }
.grid-jc-space-evenly { justify-content: space-evenly; }

.grid-ji-normal { justify-items: normal; }
.grid-ji-start { justify-items: start; }
.grid-ji-end { justify-items: end; }
.grid-ji-center { justify-items: center; }
.grid-ji-baseline { justify-items: baseline; }

.gridAutoFlow-column { grid-auto-flow: column; }
.gridAutoFlow-dense { grid-auto-flow: dense; }
.gridAutoFlow-row { grid-auto-flow: row; }
.gridAutoFlow-rowDense { grid-auto-flow: row dense; }
.gridAutoFlow-columnDense { grid-auto-flow: column dense; }