/* =========================
   Design Tokens
   ========================= */
:root {
	/* Container widths */
	--xxs: 8rem;
	--xs: 16rem;
	--sm: 32rem;
	--md: 48rem;
	--lg: 64rem;
	--xl: 70rem;

	/* Spacing scale */
	--size: 1rem;
	--size-0-2-5: calc(var(--size) / 4);
	--size-0-5: calc(var(--size) / 2);
	--size-0-7-5: calc(var(--size) * 0.75);
	--size-1: var(--size);
	--size-1-2-5: calc(var(--size) * 1.25);
	--size-1-5: calc(var(--size) * 1.5);
	--size-2: calc(var(--size) * 2);
	--size-2-5: calc(var(--size) * 2.5);
	--size-3: calc(var(--size) * 3);
	--size-4: calc(var(--size) * 4);
	--size-5: calc(var(--size) * 5);
	--size-6: calc(var(--size) * 6);
	--size-7: calc(var(--size) * 7);
	--size-8: calc(var(--size) * 8);
}

/* =========================
   Spacing Utilities
   ========================= */
/* Margin - full shorthand */
.margin-0,
.m-0 {
	margin: 0;
}
.margin-0-2-5,
.m-0-2-5 {
	margin: var(--size-0-2-5, 0.25rem);
}
.margin-0-5,
.m-0-5 {
	margin: var(--size-0-5, 0.5rem);
}
.margin-1,
.m-1 {
	margin: var(--size-1, 1rem);
}
.margin-1-2-5,
.m-1-2-5 {
	margin: var(--size-1-2-5, 1.25rem);
}
.margin-1-5,
.m-1-5 {
	margin: var(--size-1-5, 1.5rem);
}
.margin-2,
.m-2 {
	margin: var(--size-2, 2rem);
}
.margin-2-5,
.m-2-5 {
	margin: var(--size-2-5, 2.5rem);
}
.margin-3,
.m-3 {
	margin: var(--size-3, 3rem);
}
.margin-4,
.m-4 {
	margin: var(--size-4, 4rem);
}
.margin-5,
.m-5 {
	margin: var(--size-5, 5rem);
}
.margin-6,
.m-6 {
	margin: var(--size-6, 6rem);
}
.margin-7,
.m-7 {
	margin: var(--size-7, 7rem);
}
.margin-8,
.m-8 {
	margin: var(--size-8, 8rem);
}

/* Margin - block/inline shorthands */
.margin-block-0,
.mb-0 {
	margin-block: 0;
}
.margin-block-0-2-5,
.mb-0-2-5 {
	margin-block: var(--size-0-2-5, 0.25rem);
}
.margin-block-0-5,
.mb-0-5 {
	margin-block: var(--size-0-5, 0.5rem);
}
.margin-block-1,
.mb-1 {
	margin-block: var(--size-1, 1rem);
}
.margin-block-1-2-5,
.mb-1-2-5 {
	margin-block: var(--size-1-2-5, 1.25rem);
}
.margin-block-1-5,
.mb-1-5 {
	margin-block: var(--size-1-5, 1.5rem);
}
.margin-block-2,
.mb-2 {
	margin-block: var(--size-2, 2rem);
}
.margin-block-2-5,
.mb-2-5 {
	margin-block: var(--size-2-5, 2.5rem);
}
.margin-block-3,
.mb-3 {
	margin-block: var(--size-3, 3rem);
}
.margin-block-4,
.mb-4 {
	margin-block: var(--size-4, 4rem);
}
.margin-block-5,
.mb-5 {
	margin-block: var(--size-5, 5rem);
}
.margin-block-6,
.mb-6 {
	margin-block: var(--size-6, 6rem);
}
.margin-block-7,
.mb-7 {
	margin-block: var(--size-7, 7rem);
}
.margin-block-8,
.mb-8 {
	margin-block: var(--size-8, 8rem);
}

.margin-block-auto,
.mb-auto {
	margin-block: auto;
}

.margin-inline-0,
.mi-0 {
	margin-inline: 0;
}
.margin-inline-0-2-5,
.mi-0-2-5 {
	margin-inline: var(--size-0-2-5, 0.25rem);
}
.margin-inline-0-5,
.mi-0-5 {
	margin-inline: var(--size-0-5, 0.5rem);
}
.margin-inline-1,
.mi-1 {
	margin-inline: var(--size-1, 1rem);
}
.margin-inline-1-2-5,
.mi-1-2-5 {
	margin-inline: var(--size-1-2-5, 1.25rem);
}
.margin-inline-1-5,
.mi-1-5 {
	margin-inline: var(--size-1-5, 1.5rem);
}
.margin-inline-2,
.mi-2 {
	margin-inline: var(--size-2, 2rem);
}
.margin-inline-2-5,
.mi-2-5 {
	margin-inline: var(--size-2-5, 2.5rem);
}
.margin-inline-3,
.mi-3 {
	margin-inline: var(--size-3, 3rem);
}
.margin-inline-4,
.mi-4 {
	margin-inline: var(--size-4, 4rem);
}
.margin-inline-5,
.mi-5 {
	margin-inline: var(--size-5, 5rem);
}
.margin-inline-6,
.mi-6 {
	margin-inline: var(--size-6, 6rem);
}
.margin-inline-7,
.mi-7 {
	margin-inline: var(--size-7, 7rem);
}
.margin-inline-8,
.mi-8 {
	margin-inline: var(--size-8, 8rem);
}

.margin-inline-auto,
.mi-auto {
	margin-inline: auto;
}

/* Margin - block/inline start/end longhands */
.margin-block-start-0,
.mbs-0 {
	margin-block-start: 0;
}
.margin-block-start-0-2-5,
.mbs-0-2-5 {
	margin-block-start: var(--size-0-2-5, 0.25rem);
}
.margin-block-start-0-5,
.mbs-0-5 {
	margin-block-start: var(--size-0-5, 0.5rem);
}
.margin-block-start-1,
.mbs-1 {
	margin-block-start: var(--size-1, 1rem);
}
.margin-block-start-1-2-5,
.mbs-1-2-5 {
	margin-block-start: var(--size-1-2-5, 1.25rem);
}
.margin-block-start-1-5,
.mbs-1-5 {
	margin-block-start: var(--size-1-5, 1.5rem);
}
.margin-block-start-2,
.mbs-2 {
	margin-block-start: var(--size-2, 2rem);
}
.margin-block-start-2-5,
.mbs-2-5 {
	margin-block-start: var(--size-2-5, 2.5rem);
}
.margin-block-start-3,
.mbs-3 {
	margin-block-start: var(--size-3, 3rem);
}
.margin-block-start-4,
.mbs-4 {
	margin-block-start: var(--size-4, 4rem);
}
.margin-block-start-5,
.mbs-5 {
	margin-block-start: var(--size-5, 5rem);
}
.margin-block-start-6,
.mbs-6 {
	margin-block-start: var(--size-6, 6rem);
}
.margin-block-start-7,
.mbs-7 {
	margin-block-start: var(--size-7, 7rem);
}
.margin-block-start-8,
.mbs-8 {
	margin-block-start: var(--size-8, 8rem);
}

.margin-block-end-0,
.mbe-0 {
	margin-block-end: 0;
}
.margin-block-end-0-2-5,
.mbe-0-2-5 {
	margin-block-end: var(--size-0-2-5, 0.25rem);
}
.margin-block-end-0-5,
.mbe-0-5 {
	margin-block-end: var(--size-0-5, 0.5rem);
}
.margin-block-end-1,
.mbe-1 {
	margin-block-end: var(--size-1, 1rem);
}
.margin-block-end-1-2-5,
.mbe-1-2-5 {
	margin-block-end: var(--size-1-2-5, 1.25rem);
}
.margin-block-end-1-5,
.mbe-1-5 {
	margin-block-end: var(--size-1-5, 1.5rem);
}
.margin-block-end-2,
.mbe-2 {
	margin-block-end: var(--size-2, 2rem);
}
.margin-block-end-2-5,
.mbe-2-5 {
	margin-block-end: var(--size-2-5, 2.5rem);
}
.margin-block-end-3,
.mbe-3 {
	margin-block-end: var(--size-3, 3rem);
}
.margin-block-end-4,
.mbe-4 {
	margin-block-end: var(--size-4, 4rem);
}
.margin-block-end-5,
.mbe-5 {
	margin-block-end: var(--size-5, 5rem);
}
.margin-block-end-6,
.mbe-6 {
	margin-block-end: var(--size-6, 6rem);
}
.margin-block-end-7,
.mbe-7 {
	margin-block-end: var(--size-7, 7rem);
}
.margin-block-end-8,
.mbe-8 {
	margin-block-end: var(--size-8, 8rem);
}

.margin-inline-start-0,
.mis-0 {
	margin-inline-start: 0;
}
.margin-inline-start-0-2-5,
.mis-0-2-5 {
	margin-inline-start: var(--size-0-2-5, 0.25rem);
}
.margin-inline-start-0-5,
.mis-0-5 {
	margin-inline-start: var(--size-0-5, 0.5rem);
}
.margin-inline-start-1,
.mis-1 {
	margin-inline-start: var(--size-1, 1rem);
}
.margin-inline-start-1-2-5,
.mis-1-2-5 {
	margin-inline-start: var(--size-1-2-5, 1.25rem);
}
.margin-inline-start-1-5,
.mis-1-5 {
	margin-inline-start: var(--size-1-5, 1.5rem);
}
.margin-inline-start-2,
.mis-2 {
	margin-inline-start: var(--size-2, 2rem);
}
.margin-inline-start-2-5,
.mis-2-5 {
	margin-inline-start: var(--size-2-5, 2.5rem);
}
.margin-inline-start-3,
.mis-3 {
	margin-inline-start: var(--size-3, 3rem);
}
.margin-inline-start-4,
.mis-4 {
	margin-inline-start: var(--size-4, 4rem);
}
.margin-inline-start-5,
.mis-5 {
	margin-inline-start: var(--size-5, 5rem);
}
.margin-inline-start-6,
.mis-6 {
	margin-inline-start: var(--size-6, 6rem);
}
.margin-inline-start-7,
.mis-7 {
	margin-inline-start: var(--size-7, 7rem);
}
.margin-inline-start-8,
.mis-8 {
	margin-inline-start: var(--size-8, 8rem);
}

.margin-inline-end-0,
.mie-0 {
	margin-inline-end: 0;
}
.margin-inline-end-0-2-5,
.mie-0-2-5 {
	margin-inline-end: var(--size-0-2-5, 0.25rem);
}
.margin-inline-end-0-5,
.mie-0-5 {
	margin-inline-end: var(--size-0-5, 0.5rem);
}
.margin-inline-end-1,
.mie-1 {
	margin-inline-end: var(--size-1, 1rem);
}
.margin-inline-end-1-2-5,
.mie-1-2-5 {
	margin-inline-end: var(--size-1-2-5, 1.25rem);
}
.margin-inline-end-1-5,
.mie-1-5 {
	margin-inline-end: var(--size-1-5, 1.5rem);
}
.margin-inline-end-2,
.mie-2 {
	margin-inline-end: var(--size-2, 2rem);
}
.margin-inline-end-2-5,
.mie-2-5 {
	margin-inline-end: var(--size-2-5, 2.5rem);
}
.margin-inline-end-3,
.mie-3 {
	margin-inline-end: var(--size-3, 3rem);
}
.margin-inline-end-4,
.mie-4 {
	margin-inline-end: var(--size-4, 4rem);
}
.margin-inline-end-5,
.mie-5 {
	margin-inline-end: var(--size-5, 5rem);
}
.margin-inline-end-6,
.mie-6 {
	margin-inline-end: var(--size-6, 6rem);
}
.margin-inline-end-7,
.mie-7 {
	margin-inline-end: var(--size-7, 7rem);
}
.margin-inline-end-8,
.mie-8 {
	margin-inline-end: var(--size-8, 8rem);
}

/* Padding - full shorthand */
.padding-0,
.p-0 {
	padding: 0;
}
.padding-0-2-5,
.p-0-2-5 {
	padding: var(--size-0-2-5, 0.25rem);
}
.padding-0-5,
.p-0-5 {
	padding: var(--size-0-5, 0.5rem);
}
.padding-1,
.p-1 {
	padding: var(--size-1, 1rem);
}
.padding-1-2-5,
.p-1-2-5 {
	padding: var(--size-1-2-5, 1.25rem);
}
.padding-1-5,
.p-1-5 {
	padding: var(--size-1-5, 1.5rem);
}
.padding-2,
.p-2 {
	padding: var(--size-2, 2rem);
}
.padding-2-5,
.p-2-5 {
	padding: var(--size-2-5, 2.5rem);
}
.padding-3,
.p-3 {
	padding: var(--size-3, 3rem);
}
.padding-4,
.p-4 {
	padding: var(--size-4, 4rem);
}
.padding-5,
.p-5 {
	padding: var(--size-5, 5rem);
}
.padding-6,
.p-6 {
	padding: var(--size-6, 6rem);
}
.padding-7,
.p-7 {
	padding: var(--size-7, 7rem);
}
.padding-8,
.p-8 {
	padding: var(--size-8, 8rem);
}

/* Padding - block/inline shorthands */
.padding-block-0,
.pb-0 {
	padding-block: 0;
}
.padding-block-0-2-5,
.pb-0-2-5 {
	padding-block: var(--size-0-2-5, 0.25rem);
}
.padding-block-0-5,
.pb-0-5 {
	padding-block: var(--size-0-5, 0.5rem);
}
.padding-block-1,
.pb-1 {
	padding-block: var(--size-1, 1rem);
}
.padding-block-1-2-5,
.pb-1-2-5 {
	padding-block: var(--size-1-2-5, 1.25rem);
}
.padding-block-1-5,
.pb-1-5 {
	padding-block: var(--size-1-5, 1.5rem);
}
.padding-block-2,
.pb-2 {
	padding-block: var(--size-2, 2rem);
}
.padding-block-2-5,
.pb-2-5 {
	padding-block: var(--size-2-5, 2.5rem);
}
.padding-block-3,
.pb-3 {
	padding-block: var(--size-3, 3rem);
}
.padding-block-4,
.pb-4 {
	padding-block: var(--size-4, 4rem);
}
.padding-block-5,
.pb-5 {
	padding-block: var(--size-5, 5rem);
}
.padding-block-6,
.pb-6 {
	padding-block: var(--size-6, 6rem);
}
.padding-block-7,
.pb-7 {
	padding-block: var(--size-7, 7rem);
}
.padding-block-8,
.pb-8 {
	padding-block: var(--size-8, 8rem);
}

.padding-inline-0,
.pi-0 {
	padding-inline: 0;
}
.padding-inline-0-2-5,
.pi-0-2-5 {
	padding-inline: var(--size-0-2-5, 0.25rem);
}
.padding-inline-0-5,
.pi-0-5 {
	padding-inline: var(--size-0-5, 0.5rem);
}
.padding-inline-1,
.pi-1 {
	padding-inline: var(--size-1, 1rem);
}
.padding-inline-1-2-5,
.pi-1-2-5 {
	padding-inline: var(--size-1-2-5, 1.25rem);
}
.padding-inline-1-5,
.pi-1-5 {
	padding-inline: var(--size-1-5, 1.5rem);
}
.padding-inline-2,
.pi-2 {
	padding-inline: var(--size-2, 2rem);
}
.padding-inline-2-5,
.pi-2-5 {
	padding-inline: var(--size-2-5, 2.5rem);
}
.padding-inline-3,
.pi-3 {
	padding-inline: var(--size-3, 3rem);
}
.padding-inline-4,
.pi-4 {
	padding-inline: var(--size-4, 4rem);
}
.padding-inline-5,
.pi-5 {
	padding-inline: var(--size-5, 5rem);
}
.padding-inline-6,
.pi-6 {
	padding-inline: var(--size-6, 6rem);
}
.padding-inline-7,
.pi-7 {
	padding-inline: var(--size-7, 7rem);
}
.padding-inline-8,
.pi-8 {
	padding-inline: var(--size-8, 8rem);
}

/* Padding - block/inline start/end longhands */
.padding-block-start-0,
.pbs-0 {
	padding-block-start: 0;
}
.padding-block-start-0-2-5,
.pbs-0-2-5 {
	padding-block-start: var(--size-0-2-5, 0.25rem);
}
.padding-block-start-0-5,
.pbs-0-5 {
	padding-block-start: var(--size-0-5, 0.5rem);
}
.padding-block-start-1,
.pbs-1 {
	padding-block-start: var(--size-1, 1rem);
}
.padding-block-start-1-2-5,
.pbs-1-2-5 {
	padding-block-start: var(--size-1-2-5, 1.25rem);
}
.padding-block-start-1-5,
.pbs-1-5 {
	padding-block-start: var(--size-1-5, 1.5rem);
}
.padding-block-start-2,
.pbs-2 {
	padding-block-start: var(--size-2, 2rem);
}
.padding-block-start-2-5,
.pbs-2-5 {
	padding-block-start: var(--size-2-5, 2.5rem);
}
.padding-block-start-3,
.pbs-3 {
	padding-block-start: var(--size-3, 3rem);
}
.padding-block-start-4,
.pbs-4 {
	padding-block-start: var(--size-4, 4rem);
}
.padding-block-start-5,
.pbs-5 {
	padding-block-start: var(--size-5, 5rem);
}
.padding-block-start-6,
.pbs-6 {
	padding-block-start: var(--size-6, 6rem);
}
.padding-block-start-7,
.pbs-7 {
	padding-block-start: var(--size-7, 7rem);
}
.padding-block-start-8,
.pbs-8 {
	padding-block-start: var(--size-8, 8rem);
}

.padding-block-end-0,
.pbe-0 {
	padding-block-end: 0;
}
.padding-block-end-0-2-5,
.pbe-0-2-5 {
	padding-block-end: var(--size-0-2-5, 0.25rem);
}
.padding-block-end-0-5,
.pbe-0-5 {
	padding-block-end: var(--size-0-5, 0.5rem);
}
.padding-block-end-1,
.pbe-1 {
	padding-block-end: var(--size-1, 1rem);
}
.padding-block-end-1-2-5,
.pbe-1-2-5 {
	padding-block-end: var(--size-1-2-5, 1.25rem);
}
.padding-block-end-1-5,
.pbe-1-5 {
	padding-block-end: var(--size-1-5, 1.5rem);
}
.padding-block-end-2,
.pbe-2 {
	padding-block-end: var(--size-2, 2rem);
}
.padding-block-end-2-5,
.pbe-2-5 {
	padding-block-end: var(--size-2-5, 2.5rem);
}
.padding-block-end-3,
.pbe-3 {
	padding-block-end: var(--size-3, 3rem);
}
.padding-block-end-4,
.pbe-4 {
	padding-block-end: var(--size-4, 4rem);
}
.padding-block-end-5,
.pbe-5 {
	padding-block-end: var(--size-5, 5rem);
}
.padding-block-end-6,
.pbe-6 {
	padding-block-end: var(--size-6, 6rem);
}
.padding-block-end-7,
.pbe-7 {
	padding-block-end: var(--size-7, 7rem);
}
.padding-block-end-8,
.pbe-8 {
	padding-block-end: var(--size-8, 8rem);
}

.padding-inline-start-0,
.pis-0 {
	padding-inline-start: 0;
}
.padding-inline-start-0-2-5,
.pis-0-2-5 {
	padding-inline-start: var(--size-0-2-5, 0.25rem);
}
.padding-inline-start-0-5,
.pis-0-5 {
	padding-inline-start: var(--size-0-5, 0.5rem);
}
.padding-inline-start-1,
.pis-1 {
	padding-inline-start: var(--size-1, 1rem);
}
.padding-inline-start-1-2-5,
.pis-1-2-5 {
	padding-inline-start: var(--size-1-2-5, 1.25rem);
}
.padding-inline-start-1-5,
.pis-1-5 {
	padding-inline-start: var(--size-1-5, 1.5rem);
}
.padding-inline-start-2,
.pis-2 {
	padding-inline-start: var(--size-2, 2rem);
}
.padding-inline-start-2-5,
.pis-2-5 {
	padding-inline-start: var(--size-2-5, 2.5rem);
}
.padding-inline-start-3,
.pis-3 {
	padding-inline-start: var(--size-3, 3rem);
}
.padding-inline-start-4,
.pis-4 {
	padding-inline-start: var(--size-4, 4rem);
}
.padding-inline-start-5,
.pis-5 {
	padding-inline-start: var(--size-5, 5rem);
}
.padding-inline-start-6,
.pis-6 {
	padding-inline-start: var(--size-6, 6rem);
}
.padding-inline-start-7,
.pis-7 {
	padding-inline-start: var(--size-7, 7rem);
}
.padding-inline-start-8,
.pis-8 {
	padding-inline-start: var(--size-8, 8rem);
}

.padding-inline-end-0,
.pie-0 {
	padding-inline-end: 0;
}
.padding-inline-end-0-2-5,
.pie-0-2-5 {
	padding-inline-end: var(--size-0-2-5, 0.25rem);
}
.padding-inline-end-0-5,
.pie-0-5 {
	padding-inline-end: var(--size-0-5, 0.5rem);
}
.padding-inline-end-1,
.pie-1 {
	padding-inline-end: var(--size-1, 1rem);
}
.padding-inline-end-1-2-5,
.pie-1-2-5 {
	padding-inline-end: var(--size-1-2-5, 1.25rem);
}
.padding-inline-end-1-5,
.pie-1-5 {
	padding-inline-end: var(--size-1-5, 1.5rem);
}
.padding-inline-end-2,
.pie-2 {
	padding-inline-end: var(--size-2, 2rem);
}
.padding-inline-end-2-5,
.pie-2-5 {
	padding-inline-end: var(--size-2-5, 2.5rem);
}
.padding-inline-end-3,
.pie-3 {
	padding-inline-end: var(--size-3, 3rem);
}
.padding-inline-end-4,
.pie-4 {
	padding-inline-end: var(--size-4, 4rem);
}
.padding-inline-end-5,
.pie-5 {
	padding-inline-end: var(--size-5, 5rem);
}
.padding-inline-end-6,
.pie-6 {
	padding-inline-end: var(--size-6, 6rem);
}
.padding-inline-end-7,
.pie-7 {
	padding-inline-end: var(--size-7, 7rem);
}
.padding-inline-end-8,
.pie-8 {
	padding-inline-end: var(--size-8, 8rem);
}

/* =========================
   Typography
   ========================= */
.bold {
	font-weight: bold;
}
.semibold {
	font-weight: 600;
}
.normal {
	font-weight: 400;
}
.italic {
	font-style: italic;
}

/* =========================
   Text Alignment
   ========================= */
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}

/* =========================
   Text Decoration
   ========================= */
.linethrough {
	text-decoration: line-through;
}

/* =========================
   Text Transformation
   ========================= */
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.capitalize {
	text-transform: capitalize;
}

/* =========================
   Text Wrapping
   ========================= */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nowrap {
	white-space: nowrap;
}
.break-words {
	overflow-wrap: break-word;
}

/* =========================
   Display
   ========================= */
.hidden {
	display: none;
}
.block {
	display: block;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block;
}

/* =========================
   Visibility
   ========================= */
.visible {
	visibility: visible;
}
.invisible {
	visibility: hidden;
}

/* =========================
   Overflow
   ========================= */
.overflow-hidden {
	overflow: hidden;
}
.overflow-auto {
	overflow: auto;
}
.overflow-scroll {
	overflow: scroll;
}
.overflow-visible {
	overflow: visible;
}

.overflow-x-hidden {
	overflow-x: hidden;
}
.overflow-x-auto {
	overflow-x: auto;
}
.overflow-x-scroll {
	overflow-x: scroll;
}
.overflow-x-visible {
	overflow-x: visible;
}

.overflow-y-hidden {
	overflow-y: hidden;
}
.overflow-y-auto {
	overflow-y: auto;
}
.overflow-y-scroll {
	overflow-y: scroll;
}
.overflow-y-visible {
	overflow-y: visible;
}

/* =========================
   Border Radius
   ========================= */
.rounded-sm {
	border-radius: 0.125rem;
}
.rounded {
	border-radius: 0.25rem;
}
.rounded-md {
	border-radius: 0.375rem;
}
.rounded-lg {
	border-radius: 0.5rem;
}
.rounded-xl {
	border-radius: 0.75rem;
}
.rounded-full {
	border-radius: 9999px;
}

/* =========================
   Layout
   ========================= */
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}
.grid {
	display: grid;
}
.inline-grid {
	display: inline-grid;
}

.flex-wrap {
	flex-wrap: wrap;
}
.no-wrap {
	flex-wrap: nowrap;
}

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

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

/* Place utilities */
.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-items-center {
	place-items: center;
}
.place-items-start {
	place-items: start;
}
.place-items-end {
	place-items: end;
}
.place-items-stretch {
	place-items: stretch;
}

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

/* Self alignment utilities */
.align-self-start {
	align-self: start;
}
.align-self-center {
	align-self: center;
}
.align-self-end {
	align-self: end;
}
.align-self-stretch {
	align-self: 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;
}

.gap-1 {
	gap: var(--size-1, 1rem);
}
.gap-2 {
	gap: var(--size-2, 2rem);
}
.gap-0-2-5 {
	gap: var(--size-0-2-5, 0.25rem);
}
.gap-0-5 {
	gap: var(--size-0-5, 0.5rem);
}
.gap-1-5 {
	gap: var(--size-1-5, 1.5rem);
}
.gap-3 {
	gap: var(--size-3, 3rem);
}

.order-1 {
	order: 1;
}
.order-2 {
	order: 2;
}
.order-3 {
	order: 3;
}
.order-first {
	order: -9999;
}
.order-last {
	order: 9999;
}

/* =========================
   Grid Helpers
   ========================= */
.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* =========================
   Positioning
   ========================= */
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}

/* =========================
   Containers
   ========================= */

.max-content {
	max-width: max-content;
}
.min-content {
	max-width: min-content;
}
.fit-content {
	max-width: fit-content;
}

.inner {
	--inner-width: var(--size-3);
	--inner-padding-block: var(--size-6);

	inline-size: min(100% - var(--inner-width), var(--lg));
	margin-inline: auto;
	padding-block: var(--inner-padding-block);
}

/* =========================
   Utilities
   ========================= */

/* =========================
   Wrapper/Layout
   ========================= */
.wrapper {
	min-block-size: 100dvh;
	grid-template-rows: auto 1fr auto;
	align-items: start;
}

/* =========================
   Flex/Grid Helpers
   ========================= */
.auto-fit {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--xs, 10rem), 100%), 1fr));
}
.auto-fill {
	grid-template-columns: repeat(auto-fill, minmax(min(var(--xs, 10rem), 100%), 1fr));
}

/* Flex grow/shrink */
.flex-1 {
	flex: 1 1 0%;
}
.flex-auto {
	flex: 1 1 auto;
}
.flex-none {
	flex: none;
}
.grow {
	flex-grow: 1;
}
.shrink {
	flex-shrink: 1;
}
.no-shrink {
	flex-shrink: 0;
}

/* =========================
   Float & Image Shaping
   ========================= */
.float-left {
	float: left;
	margin-right: var(--size-1, 1rem);
}
.float-right {
	float: right;
	margin-left: var(--size-1, 1rem);
}
.image-shape-right {
	float: right;
	margin: 0 0 var(--size-1, 1rem) var(--size-1, 1rem);
	shape-outside: circle(50%);
}

/* =========================
   Accessibility Helpers
   ========================= */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* =========================
   Text Wrapping Utilities
   ========================= */
.balance {
	text-wrap: balance;
}
.pretty {
	text-wrap: pretty;
}
.no-balance {
	text-wrap: wrap;
}

/* =========================
   Aspect Ratios
   ========================= */
.square {
	aspect-ratio: 1 / 1;
}
.landscape {
	aspect-ratio: 4 / 3;
}
.portrait {
	aspect-ratio: 3 / 4;
}
.widescreen {
	aspect-ratio: 16 / 9;
}
.ultrawide {
	aspect-ratio: 18 / 5;
}
.golden {
	aspect-ratio: 1.618 / 1;
}

/* =========================
   Object Fit
   ========================= */
.object-cover {
	object-fit: cover;
}
.object-contain {
	object-fit: contain;
}
.object-fill {
	object-fit: fill;
}
.object-none {
	object-fit: none;
}
.object-scale-down {
	object-fit: scale-down;
}

/* =========================
   Miscellaneous
   ========================= */
.full-width {
	width: 100%;
}
.w-auto {
	width: auto;
}
.h-auto {
	height: auto;
}
.list-style-none {
	list-style: none;
}

/* =========================
   Border
   ========================= */
.border {
	border: 1px solid currentColor;
}
.border-0 {
	border: 0;
}
.border-block-start,
.border-bs {
	border-block-start: 1px solid currentColor;
}
.border-block-end,
.border-be {
	border-block-end: 1px solid currentColor;
}
.border-inline-start,
.border-is {
	border-inline-start: 1px solid currentColor;
}
.border-inline-end,
.border-ie {
	border-inline-end: 1px solid currentColor;
}
.border-none {
	border: none;
}

/* =========================
   Cursor
   ========================= */
.cursor-pointer {
	cursor: pointer;
}
.cursor-default {
	cursor: default;
}
.cursor-not-allowed {
	cursor: not-allowed;
}
.cursor-text {
	cursor: text;
}
.cursor-move {
	cursor: move;
}
.cursor-wait {
	cursor: wait;
}
.cursor-crosshair {
	cursor: crosshair;
}
.cursor-help {
	cursor: help;
}
.cursor-progress {
	cursor: progress;
}
.cursor-grab {
	cursor: grab;
}
.cursor-grabbing {
	cursor: grabbing;
}

/* =========================
   Opacity
   ========================= */
.opacity-0 {
	opacity: 0;
}
.opacity-50 {
	opacity: 0.5;
}
.opacity-100 {
	opacity: 1;
}