/* Widths */
.w-full { width: 100% }
.w-half { width: 50% }
.w-quarter { width: 25% }
.w-ten { width: 10% }
.w-min { width: 1px }

/* Margins */
.m-0 { margin: 0 }
.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-32 { margin: 32px; }

.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }
.ml-32 { margin-left: 32px; }

.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-24 { margin-right: 24px; }
.mr-32 { margin-right: 32px; }

/* Padding */
.p-0 { padding: 0 }
.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }

.pb-4 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }
.pb-32 { padding-bottom: 32px; }

.pt-4 { padding-top: 4px; }
.pt-8 { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }
.pt-32 { padding-top: 32px; }

.pl-4 { padding-left: 4px; }
.pl-8 { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
.pl-32 { padding-left: 32px; }

.pr-4 { padding-right: 4px; }
.pr-8 { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
.pr-32 { padding-right: 32px; }

/* Text */

.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }

.no-wrap { white-space: nowrap !important; }

.fs-4 { font-size: 0.4rem; }
.fs-8 { font-size: 0.8rem; }
.fs-10 { font-size: 1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-16 { font-size: 1.6rem; }
.fs-24 { font-size: 2.4rem; }
.fs-32 { font-size: 3.2rem; }

.bold { font-weight: bold; }
.light { font-weight: lighter; }

/* Flex related CSS */

.flex { display: flex; }
.flex-column { flex-direction: column; }

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

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

.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; }

.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }

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

/* Cursor */
.pointer { cursor: pointer; }

/* Text Color */
.text-white { color: white; }