/* --- Grid --- */

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

.grid-cols-2 {
  grid-template-columns: auto auto;
}

.grid-cols-3 {
  grid-template-columns: auto auto auto;
}

.grid-cols-4 {
  grid-template-columns: auto auto auto auto;
}

.grid-cols-1-1 {
  grid-template-columns: 1fr 1fr;
}

.grid-cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

.grid-cols-3-2 {
  grid-template-columns: 3fr 2fr;
}

.grid-cols-1-1-1 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-rows-2 {
  grid-template-rows: auto auto;
}

.grid-rows-3 {
  grid-template-rows: auto auto auto;
}

.grid-rows-4 {
  grid-template-rows: auto auto auto auto;
}

.grid-rows-1-1 {
  grid-template-rows: 1fr 1fr;
}

.grid-rows-2-1 {
  grid-template-rows: 2fr 1fr;
}

.grid-rows-3-2 {
  grid-template-rows: 3fr 2fr;
}

.col-span-2 {
  -ms-grid-column-span: span 2 / span 2;
  grid-column: span 2 / span 2;
}

.col-span-3 {
  -ms-grid-column-span: span 3 / span 3;
  grid-column: span 3 / span 3;
}

.col-span-4 {
  -ms-grid-column-span: span 4 / span 4;
  grid-column: span 4 / span 4;
}

.row-span-2 {
  -ms-grid-row-span: span 2 / span 2;
  grid-row: span 2 / span 2;
}

.row-span-3 {
  -ms-grid-row-span: span 3 / span 3;
  grid-row: span 3 / span 3;
}

.row-span-4 {
  -ms-grid-row-span: span 4 / span 4;
  grid-row: span 4 / span 4;
}

.gap-1 {
  grid-gap: 0.25rem;
  gap: 0.25rem;
}

.gap-2 {
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.gap-4 {
  grid-gap: 1rem;
  gap: 1rem;
}

.gap-8 {
  grid-gap: 2rem;
  gap: 2rem;
}

/* --- Positioning --- */

.content-center {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

.place-content-center {
  place-content: center;
}

.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.place-items-center {
  place-items: center;
}

/* --- Text --- */

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-center {
  text-align: center;
}

/* --- Transforms --- */

.flip-x {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.flip-y {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}