/* ==========================================================================
   Pars Takin — Tailwind-like CSS Grid System
   Breakpoints: sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Container
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1rem;
	max-width: 1280px;
}

@media (min-width: 640px) {
	.container {
		max-width: 640px;
		padding-inline: 1.5rem;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: 1280px;
		padding-inline: 2rem;
	}
}

@media (min-width: 1536px) {
	.container {
		max-width: 1536px;
	}
}

/* --------------------------------------------------------------------------
   2. Grid Display
   -------------------------------------------------------------------------- */
.grid {
	display: grid;
}

.inline-grid {
	display: inline-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-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
	grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
	grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
	grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-none {
	grid-template-columns: none;
}

.grid-rows-1 {
	grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
	grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
	grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
	grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
	grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   3. Column / Row Span
   -------------------------------------------------------------------------- */
.col-auto {
	grid-column: auto;
}
.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;
}

.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-start-auto {
	grid-column-start: auto;
}

.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;
}
.col-end-auto {
	grid-column-end: auto;
}

.row-auto {
	grid-row: auto;
}
.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;
}

.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-start-auto {
	grid-row-start: auto;
}

.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;
}
.row-end-auto {
	grid-row-end: auto;
}

/* --------------------------------------------------------------------------
   4. Gap
   -------------------------------------------------------------------------- */
.gap-0 {
	gap: 0;
}
.gap-px {
	gap: 1px;
}
.gap-0\.5 {
	gap: 0.125rem;
}
.gap-1 {
	gap: 0.25rem;
}
.gap-1\.5 {
	gap: 0.375rem;
}
.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;
}
.gap-10 {
	gap: 2.5rem;
}
.gap-12 {
	gap: 3rem;
}
.gap-16 {
	gap: 4rem;
}
.gap-20 {
	gap: 5rem;
}
.gap-24 {
	gap: 6rem;
}

.gap-x-0 {
	column-gap: 0;
}
.gap-x-1 {
	column-gap: 0.25rem;
}
.gap-x-2 {
	column-gap: 0.5rem;
}
.gap-x-3 {
	column-gap: 0.75rem;
}
.gap-x-4 {
	column-gap: 1rem;
}
.gap-x-6 {
	column-gap: 1.5rem;
}
.gap-x-8 {
	column-gap: 2rem;
}
.gap-x-10 {
	column-gap: 2.5rem;
}

.gap-y-0 {
	row-gap: 0;
}
.gap-y-1 {
	row-gap: 0.25rem;
}
.gap-y-2 {
	row-gap: 0.5rem;
}
.gap-y-3 {
	row-gap: 0.75rem;
}
.gap-y-4 {
	row-gap: 1rem;
}
.gap-y-6 {
	row-gap: 1.5rem;
}
.gap-y-8 {
	row-gap: 2rem;
}
.gap-y-10 {
	row-gap: 2.5rem;
}

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

.justify-items-start {
	justify-items: start;
}
.justify-items-center {
	justify-items: center;
}
.justify-items-end {
	justify-items: end;
}
.justify-items-stretch {
	justify-items: stretch;
}

.justify-self-start {
	justify-self: start;
}
.justify-self-center {
	justify-self: center;
}
.justify-self-end {
	justify-self: end;
}
.justify-self-stretch {
	justify-self: stretch;
}

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

.align-self-start {
	align-self: start;
}
.align-self-center {
	align-self: center;
}
.align-self-end {
	align-self: end;
}
.align-self-stretch {
	align-self: stretch;
}
.align-self-baseline {
	align-self: baseline;
}

.place-items-center {
	place-items: center;
}
.place-items-start {
	place-items: start;
}
.place-items-end {
	place-items: end;
}
.place-items-stretch {
	place-items: stretch;
}

.place-content-center {
	place-content: center;
}
.place-content-start {
	place-content: start;
}
.place-content-end {
	place-content: end;
}
.place-content-between {
	place-content: space-between;
}
.place-content-around {
	place-content: space-around;
}
.place-content-evenly {
	place-content: space-evenly;
}
.place-content-stretch {
	place-content: stretch;
}

/* --------------------------------------------------------------------------
   6. Responsive: Small (sm >= 640px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
	.sm\:grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sm\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.sm\:grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.sm\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.sm\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.sm\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.sm\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.sm\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.sm\:col-span-full {
		grid-column: 1 / -1;
	}
	.sm\:gap-4 {
		gap: 1rem;
	}
	.sm\:gap-6 {
		gap: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   7. Responsive: Medium (md >= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.md\:grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.md\:grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.md\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.md\:grid-cols-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	.md\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.md\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.md\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.md\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.md\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.md\:col-span-6 {
		grid-column: span 6 / span 6;
	}
	.md\:col-span-8 {
		grid-column: span 8 / span 8;
	}
	.md\:col-span-12 {
		grid-column: span 12 / span 12;
	}
	.md\:col-span-full {
		grid-column: 1 / -1;
	}
	.md\:gap-6 {
		gap: 1.5rem;
	}
	.md\:gap-8 {
		gap: 2rem;
	}
}

/* --------------------------------------------------------------------------
   8. Responsive: Large (lg >= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.lg\:grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.lg\:grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.lg\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.lg\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.lg\:col-span-1 {
		grid-column: span 1 / span 1;
	}
	.lg\:col-span-2 {
		grid-column: span 2 / span 2;
	}
	.lg\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.lg\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.lg\:col-span-5 {
		grid-column: span 5 / span 5;
	}
	.lg\:col-span-6 {
		grid-column: span 6 / span 6;
	}
	.lg\:col-span-7 {
		grid-column: span 7 / span 7;
	}
	.lg\:col-span-8 {
		grid-column: span 8 / span 8;
	}
	.lg\:col-span-9 {
		grid-column: span 9 / span 9;
	}
	.lg\:col-span-12 {
		grid-column: span 12 / span 12;
	}
	.lg\:col-span-full {
		grid-column: 1 / -1;
	}
	.lg\:gap-8 {
		gap: 2rem;
	}
	.lg\:gap-10 {
		gap: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   9. Responsive: Extra Large (xl >= 1280px)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
	.xl\:grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.xl\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.xl\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.xl\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.xl\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.xl\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.xl\:col-span-3 {
		grid-column: span 3 / span 3;
	}
	.xl\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.xl\:col-span-6 {
		grid-column: span 6 / span 6;
	}
	.xl\:col-span-8 {
		grid-column: span 8 / span 8;
	}
	.xl\:col-span-12 {
		grid-column: span 12 / span 12;
	}
	.xl\:gap-10 {
		gap: 2.5rem;
	}
	.xl\:gap-12 {
		gap: 3rem;
	}
}

/* --------------------------------------------------------------------------
   10. Responsive: 2 Extra Large (2xl >= 1536px)
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) {
	.\32xl\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.\32xl\:grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.\32xl\:col-span-4 {
		grid-column: span 4 / span 4;
	}
	.\32xl\:col-span-6 {
		grid-column: span 6 / span 6;
	}
}