:root {
  /* Grid container */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-4: repeat(4, minmax(0, 1fr));
  --grid-cols-5: repeat(5, minmax(0, 1fr));
  --grid-cols-6: repeat(6, minmax(0, 1fr));
  --grid-cols-7: repeat(7, minmax(0, 1fr));
  --grid-cols-8: repeat(8, minmax(0, 1fr));
  --grid-cols-9: repeat(9, minmax(0, 1fr));
  --grid-cols-10: repeat(10, minmax(0, 1fr));
  --grid-cols-11: repeat(11, minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));

  /* Grid rows */
  --grid-rows-1: repeat(1, minmax(0, 1fr));
  --grid-rows-2: repeat(2, minmax(0, 1fr));
  --grid-rows-3: repeat(3, minmax(0, 1fr));
  --grid-rows-4: repeat(4, minmax(0, 1fr));
  --grid-rows-5: repeat(5, minmax(0, 1fr));
  --grid-rows-6: repeat(6, minmax(0, 1fr));

  /* Gap */
  --grid-gap-xs: var(--spacing-xs);
  --grid-gap-sm: var(--spacing-sm);
  --grid-gap-md: var(--spacing-md);
  --grid-gap-lg: var(--spacing-lg);
  --grid-gap-xl: var(--spacing-xl);

  /* Alinhamento */
  --grid-justify-start: start;
  --grid-justify-end: end;
  --grid-justify-center: center;
  --grid-justify-between: space-between;
  --grid-justify-around: space-around;
  --grid-justify-evenly: space-evenly;

  --grid-items-start: start;
  --grid-items-end: end;
  --grid-items-center: center;
  --grid-items-stretch: stretch;
}

/* Classes utilitárias de grid */
.grid { display: grid; }
.grid-inline { display: inline-grid; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
.grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
.grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
.grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
.grid-cols-5 { grid-template-columns: var(--grid-cols-5); }
.grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
.grid-cols-7 { grid-template-columns: var(--grid-cols-7); }
.grid-cols-8 { grid-template-columns: var(--grid-cols-8); }
.grid-cols-9 { grid-template-columns: var(--grid-cols-9); }
.grid-cols-10 { grid-template-columns: var(--grid-cols-10); }
.grid-cols-11 { grid-template-columns: var(--grid-cols-11); }
.grid-cols-12 { grid-template-columns: var(--grid-cols-12); }

/* Grid rows */
.grid-rows-1 { grid-template-rows: var(--grid-rows-1); }
.grid-rows-2 { grid-template-rows: var(--grid-rows-2); }
.grid-rows-3 { grid-template-rows: var(--grid-rows-3); }
.grid-rows-4 { grid-template-rows: var(--grid-rows-4); }
.grid-rows-5 { grid-template-rows: var(--grid-rows-5); }
.grid-rows-6 { grid-template-rows: var(--grid-rows-6); }

/* Gap */
.gap-xs { gap: var(--grid-gap-xs); }
.gap-sm { gap: var(--grid-gap-sm); }
.gap-md { gap: var(--grid-gap-md); }
.gap-lg { gap: var(--grid-gap-lg); }
.gap-xl { gap: var(--grid-gap-xl); }

/* Column gap */
.column-gap-xs { column-gap: var(--grid-gap-xs); }
.column-gap-sm { column-gap: var(--grid-gap-sm); }
.column-gap-md { column-gap: var(--grid-gap-md); }
.column-gap-lg { column-gap: var(--grid-gap-lg); }
.column-gap-xl { column-gap: var(--grid-gap-xl); }

/* Row gap */
.row-gap-xs { row-gap: var(--grid-gap-xs); }
.row-gap-sm { row-gap: var(--grid-gap-sm); }
.row-gap-md { row-gap: var(--grid-gap-md); }
.row-gap-lg { row-gap: var(--grid-gap-lg); }
.row-gap-xl { row-gap: var(--grid-gap-xl); }

/* Justify items */
.justify-items-start { justify-items: var(--grid-justify-start); }
.justify-items-end { justify-items: var(--grid-justify-end); }
.justify-items-center { justify-items: var(--grid-justify-center); }
.justify-items-stretch { justify-items: var(--grid-justify-stretch); }

/* Align items */
.align-items-start { align-items: var(--grid-items-start); }
.align-items-end { align-items: var(--grid-items-end); }
.align-items-center { align-items: var(--grid-items-center); }
.align-items-stretch { align-items: var(--grid-items-stretch); }

/* Justify content */
.justify-content-start { justify-content: var(--grid-justify-start); }
.justify-content-end { justify-content: var(--grid-justify-end); }
.justify-content-center { justify-content: var(--grid-justify-center); }
.justify-content-between { justify-content: var(--grid-justify-between); }
.justify-content-around { justify-content: var(--grid-justify-around); }
.justify-content-evenly { justify-content: var(--grid-justify-evenly); }

/* Align content */
.align-content-start { align-content: var(--grid-items-start); }
.align-content-end { align-content: var(--grid-items-end); }
.align-content-center { align-content: var(--grid-items-center); }
.align-content-between { align-content: var(--grid-justify-between); }
.align-content-around { align-content: var(--grid-justify-around); }
.align-content-evenly { align-content: var(--grid-justify-evenly); }

/* Grid auto flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }

/* Grid auto columns */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

/* Grid auto rows */
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min { grid-auto-rows: min-content; }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* Grid column span */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid row span */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Grid column start/end */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-8 { grid-column-end: 8; }
.col-end-9 { grid-column-end: 9; }
.col-end-10 { grid-column-end: 10; }
.col-end-11 { grid-column-end: 11; }
.col-end-12 { grid-column-end: 12; }
.col-end-13 { grid-column-end: 13; }

/* Grid row start/end */
.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }