.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }
.grid-rows-none { grid-template-rows: none; }
.col-auto { grid-column: auto; }
.col-span-full { grid-column: 1 / -1; }
.col-start-auto { grid-column-start: auto; }
.col-end-auto { grid-column-end: auto; }
.row-auto { grid-row: auto; }
.row-span-full { grid-row: 1 / -1; }
.row-start-auto { grid-row-start: auto; }
.row-end-auto { grid-row-end: auto; }
.columns-auto { columns: auto; }
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-min { grid-auto-columns: min-content; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-col-dense { grid-auto-flow: column dense; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-min { grid-auto-rows: min-content; }

/* Flexbox system */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-grow, .grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink, .shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Alignment utilities */
.place-content-around { place-content: space-around; }
.place-content-baseline { place-content: baseline; }
.place-content-between { place-content: space-between; }
.place-content-center { place-content: center; }
.place-content-end { place-content: end; }
.place-content-evenly { place-content: space-evenly; }
.place-content-start { place-content: start; }
.place-content-stretch { place-content: stretch; }
.place-items-baseline { place-items: baseline; }
.place-items-center { place-items: center; }
.place-items-end { place-items: end; }
.place-items-start { place-items: start; }
.place-items-stretch { place-items: stretch; }
.content-around { align-content: space-around; }
.content-baseline { align-content: baseline; }
.content-between { align-content: space-between; }
.content-center { align-content: center; }
.content-end { align-content: flex-end; }
.content-evenly { align-content: space-evenly; }
.content-normal { align-content: normal; }
.content-start { align-content: flex-start; }
.content-stretch { align-content: stretch; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-self-auto { justify-self: auto; }
.justify-self-center { justify-self: center; }
.justify-self-end { justify-self: flex-end; }
.justify-self-start { justify-self: flex-start; }
.justify-self-stretch { justify-self: stretch; }
.place-self-auto { place-self: auto; }
.place-self-center { place-self: center; }
.place-self-end { place-self: end; }
.place-self-start { place-self: start; }
.place-self-stretch { place-self: stretch; }

/* Gaps */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Responsive grid */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.h-1\/2 { height: 50%; }
.h-2\/3 { height: 66.6667%; }
.w-1\/2 { width: 50%; }
.w-3\/4 { width: 75%; }
.w-11\/12 { width: 91.6667%; }
/* Grid system */