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

/* ==================================================
	Flex Display
================================================== */
.flex { display: flex; }

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

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

.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

/* ==================================================
	Sizing
================================================== */
.w-full { width: 100%; }

.w-250 { width: 250px; }

.h-full { height: 100%; }

.min-h-screen { min-height: 100vh; }

.h-70vh { height: 70vh; }
.h-60vh { height: 60vh; }
.h-50vh { height: 50vh; }
.h-40vh { height: 40vh; }
.h-30vh { height: 30vh; }
.h-20vh { height: 20vh; }
.h-10vh { height: 10vh; }

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

/* ==================================================
	Object Position
================================================== */
.object-top { object-position: top; }
.object-center { object-position: center; }
.object-bottom { object-position: bottom; }

.object-left { object-position: left; }
.object-right { object-position: right; }

.object-top-center { object-position: center top; }
.object-bottom-center { object-position: center bottom; }

/* ==================================================
	Padding
================================================== */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }

.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }

.py-5 { padding-top: 1.25rem;  padding-bottom: 1.25rem; }

/* ==================================================
	Max Width
================================================== */
.max-w-250 { max-width: 250px; }
.max-w-1200 { max-width: 1200px; }

/* ==================================================
	Min Width
================================================== */
.min-w-250 { min-width: 250px; }

/* ==================================================
	Max Height
================================================== */
.max-h-50 { max-height: 50px; }

/* ==================================================
	Min Height
================================================== */
.min-h-50 { min-height: 50px; }

/* ==================================================
	Margin
================================================== */
.mx-auto { margin-left: auto; margin-right: auto; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
/* ==================================================
	Position
================================================== */
.relative { position: relative; }

.sticky { position: sticky; top: 0; z-index: 100; }

.absolute-center { position: absolute; left: 50%; transform: translateX(-50%);}

/* ==================================================
	Overflow
================================================== */
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ==================================================
	Flex Alignment
================================================== */
.items-center { align-items: center; }

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

/* ==================================================
	Flex Gap
================================================== */
.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; }

/* ==================================================
	Grid
================================================== */
.grid { display: grid; }

.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ==================================================
	Grid Alignment
================================================== */
.justify-self-start { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end { justify-self: end; }