/**
 * Sizing Utilities
 * Width, height, and min/max dimensions
 */

/* ===== Width ===== */
.w-auto {
	width: auto;
}

.w-full {
	width: 100%;
}

.w-screen {
	width: 100vw !important;
}

figure.w-screen img{
	width: 100vw !important;
}

.w-fit {
	width: fit-content;
}

.w-min {
	width: min-content;
}

.w-max {
	width: max-content;
}

.w-1\/2 {
	width: 50%;
}

.w-1\/3 {
	width: 33.333333%;
}

.w-2\/3 {
	width: 66.666667%;
}

.w-1\/4 {
	width: 25%;
}

.w-2\/4 {
	width: 50%;
}

.w-3\/4 {
	width: 75%;
}

.w-1\/5 {
	width: 20%;
}

.w-2\/5 {
	width: 40%;
}

.w-3\/5 {
	width: 60%;
}

.w-4\/5 {
	width: 80%;
}

.w-1\/6 {
	width: 16.666667%;
}

.w-2\/6 {
	width: 33.333333%;
}

.w-3\/6 {
	width: 50%;
}

.w-4\/6 {
	width: 66.666667%;
}

.w-5\/6 {
	width: 83.333333%;
}

/* Bracket notation for custom widths */
[class~="w-\[420px\]"] {
	width: 420px;
}

[class~="w-\[250px\]"] {
	width: 250px;
}

/* ===== Max Width ===== */
.max-w-none {
	max-width: none !important;
}

figure.max-w-none > img {
	max-width: none !important;
}

.max-w-full {
	max-width: 100%;
}

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

.max-w-max {
	max-width: max-content;
}

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

.max-w-xs {
	max-width: 20rem; /* 320px */
}

.max-w-sm {
	max-width: 24rem; /* 384px */
}

.max-w-md {
	max-width: 28rem; /* 448px */
}

.max-w-lg {
	max-width: 32rem; /* 512px */
}

.max-w-xl {
	max-width: 36rem; /* 576px */
}

.max-w-2xl {
	max-width: 42rem; /* 672px */
}

.max-w-3xl {
	max-width: 48rem; /* 768px */
}

.max-w-4xl {
	max-width: 56rem; /* 896px */
}

.max-w-5xl {
	max-width: 64rem; /* 1024px */
}

.max-w-6xl {
	max-width: 72rem; /* 1152px */
}

.max-w-7xl {
	max-width: 80rem; /* 1280px */
}

/* Bracket notation for custom max-widths */
[class~="max-w-\[650px\]"] {
	max-width: 650px;
}

[class~="max-w-\[600px\]"] {
	max-width: 600px;
}

[class~="max-w-\[500px\]"] {
	max-width: 500px;
}

[class~="max-w-\[420px\]"] {
	max-width: 420px;
}

[class~="max-w-\[350px\]"] {
	max-width: 350px;
}

[class~="max-w-\[300px\]"] {
	max-width: 300px;
}

[class~="max-w-\[200px\]"] {
	max-width: 200px;
}

[class~="max-w-\[250px\]"] {
	max-width: 250px;
}

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

.min-w-full {
	min-width: 100%;
}

.min-w-min {
	min-width: min-content;
}

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

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

.min-w-screen {
	min-width: 100vw;
}

/* Bracket notation for custom min-widths */
[class~="min-w-\[115px\]"] {
	min-width: 115px;
}

[class~="min-w-\[450px\]"] {
	min-width: 450px;
}

/* ===== Height ===== */
.h-auto {
	height: auto;
}

.h-full {
	height: 100%;
}

.h-screen {
	height: 100vh;
}

.h-fit {
	height: fit-content;
}

.h-min {
	height: min-content;
}

.h-max {
	height: max-content;
}

.h-10 {
	height: 2.5rem; /* 40px */
}

.h-12 {
	height: 3rem; /* 48px */
}

.h-16 {
	height: 4rem; /* 64px */
}

.h-20 {
	height: 5rem; /* 80px */
}

.h-24 {
	height: 6rem; /* 96px */
}

.h-32 {
	height: 8rem; /* 128px */
}

.h-40 {
	height: 10rem; /* 160px */
}

.h-48 {
	height: 12rem; /* 192px */
}

.h-56 {
	height: 14rem; /* 224px */
}

.h-64 {
	height: 16rem; /* 256px */
}

.h-\[400px\] {
	height: 400px;
}

.h-\[250px\] {
	height: 250px;
}

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

.min-h-full {
	min-height: 100%;
}

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

.min-h-fit {
	min-height: fit-content;
}

.min-h-min {
	min-height: min-content;
}

.min-h-max {
	min-height: max-content;
}

.min-h-12 {
	min-height: 3rem; /* 48px */
}

.min-h-20 {
	min-height: 5rem; /* 80px */
}

.min-h-24 {
	min-height: 6rem; /* 96px */
}

.min-h-\[300px\] {
	min-height: 300px;
}

.min-h-\[350px\] {
	min-height: 350px;
}

.min-h-\[400px\] {
	min-height: 400px;
}

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

.max-h-full {
	max-height: 100%;
}

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

.max-h-fit {
	max-height: fit-content;
}

.max-h-min {
	max-height: min-content;
}

.max-h-max {
	max-height: max-content;
}

.max-h-12 {
	max-height: 3rem; /* 48px */
}

.max-h-20 {
	max-height: 5rem; /* 80px */
}

.max-h-24 {
	max-height: 6rem; /* 96px */
}

.max-h-32 {
	max-height: 8rem; /* 128px */
}

.max-h-48 {
	max-height: 12rem; /* 192px */
}

.max-h-64 {
	max-height: 16rem; /* 256px */
}

.max-h-\[200px\] {
	max-height: 200px;
}

/* ===== Responsive Image Sizing ===== */
figure.w-full img {
	width: 100%;
}

figure.w-auto img {
	width: auto;
}

figure.h-full img {
	height: 100%;
}

/* ===== Responsive Sizing ===== */
@media (max-width: 544px) {
	[class~="sm:w-auto"] {
		width: auto;
	}

	[class~="sm:w-full"] {
		width: 100%;
	}

	[class~="sm:w-fit"] {
		width: fit-content;
	}

	[class~="sm:w-1\/2"] {
		width: 50%;
	}

	[class~="sm:h-auto"] {
		height: auto;
	}

	[class~="sm:h-10"] {
		height: 2.5rem;
	}

	[class~="sm:h-12"] {
		height: 3rem;
	}

	[class~="sm:min-h-0"] {
		min-height: 0;
	}

	[class~="sm:max-h-fit"] {
		max-height: fit-content;
	}
}

@media (max-width: 781px) {
	[class~="md:w-auto"] {
		width: auto;
	}

	[class~="md:w-full"] {
		width: 100%;
	}

	[class~="md:w-1\/2"] {
		width: 50%;
	}

	[class~="md:w-2\/3"] {
		width: 66.666667%;
	}

  [class~="md:max-w-\[200px\]"] {
    max-width: 200px;
  }

  [class~="md:max-w-\[250px\]"] {
    max-width: 250px !important;
  }

  [class~="md:max-w-\[300px\]"] {
    max-width: 300px !important;
  }

  [class~="md:max-w-\[400px\]"] {
    max-width: 400px !important;
  }

	[class~="md:h-auto"] {
		height: auto;
	}

	[class~="md:h-10"] {
		height: 3rem; /* 48px */
	}

	[class~="md:h-12"] {
		height: 3rem;
	}

	[class~="md:h-16"] {
		height: 4rem;
	}

	[class~="md:h-56"] {
		height: 14rem; /* 224px */
	}

	[class~="md:min-h-\[300px\]"] {
    min-height: 300px !important;
  }

	[class~="md:min-h-\[350px\]"] {
    min-height: 350px !important;
  }

	[class~="md:min-h-none"] {
		min-height: unset;
	}

	[class~="md:min-h-0"] {
		min-height: 0;
	}

	[class~="md:max-h-none"] {
		max-height: none;
	}

	[class~="md:max-h-fit"] {
		max-height: fit-content;
	}

	[class~="md:max-h-screen"] {
		max-height: 100vh;
	}
}

@media (min-width: 782px) {
	[class~="lg:w-auto"] {
		width: auto;
	}

	[class~="lg:w-full"] {
		width: 100%;
	}

	[class~="lg:w-1\/2"] {
		width: 50%;
	}

	[class~="lg:w-2\/3"] {
		width: 66.666667%;
	}

	[class~="lg:w-\[420px\]"] {
		width: 420px;
	}

	[class~="lg:h-auto"] {
		height: auto;
	}

	[class~="lg:h-10"] {
		height: 2.5rem;
	}

	[class~="lg:h-12"] {
		height: 3rem;
	}

	[class~="lg:h-20"] {
		height: 5rem;
	}

	[class~="lg:max-h-fit"] {
		max-height: fit-content;
	}

	[class~="lg:max-h-screen"] {
		max-height: 100vh;
	}

	[class~="lg:min-h-[500px]"] {
		min-height: 500px;
	}
}