.block {
    display: block;
}

/* flex */
.flex {
    display: flex;
}

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

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

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

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

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

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

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

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

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

.flex-wrap {
    flex-wrap: wrap
}

;

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

/* padding */
.p-1 {
    padding: 4px;
}

.p-2 {
    padding: 8px;
}

.p-3 {
    padding: 12px;
}

.p-4 {
    padding: 16px;
}

.px-1 {
    padding-left: 4px;
    padding-right: 4px;
}

.px-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.px-3 {
    padding-left: 12px;
    padding-right: 12px;
}

.px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
}

.py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.pt-1 {
    padding-top: 4px;
}

.pt-2 {
    padding-top: 8px;
}

.pt-3 {
    padding-top: 12px;
}

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

.pb-1 {
    padding-bottom: 4px;
}

.pb-2 {
    padding-bottom: 8px;
}

.pb-3 {
    padding-bottom: 8px;
}

.pl-1 {
    padding-left: 4px;
}

.pl-2 {
    padding-left: 8px;
}

.pl-3 {
    padding-left: 8px;
}

.pr-1 {
    padding-right: 4px;
}

.pr-2 {
    padding-right: 8px;
}

.pr-3 {
    padding-right: 8px;
}

/** margin */
.m-1 {
    margin: 4px;
}

.m-2 {
    margin: 8px;
}

.m-3 {
    margin: 12px;
}

.m-4 {
    margin: 16px;
}

.mx-1 {
    margin-left: 4px;
    margin-right: 4px;
}

.mx-2 {
    margin-left: 8px;
    margin-right: 8px;
}

.mx-3 {
    margin-left: 12px;
    margin-right: 12px;
}

.mx-4 {
    margin-left: 16px;
    margin-right: 16px;
}

.my-1 {
    margin-top: 4px;
    margin-bottom: 4px;
}

.my-2 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.my-3 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.ml-1 {
    margin-left: 4px;
}

.ml-2 {
    margin-left: 8px;
}

.ml-3 {
    margin-left: 12px;
}

.mr-1 {
    margin-right: 4px;
}

.mr-2 {
    margin-right: 8px;
}

.mr-3 {
    margin-right: 12px;
}

.gap {
    gap: 4px;
}

.gap-2 {
    gap: 4px;
}

/* text */
.text-center {
    text-align: center;
}

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

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/** position */
.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0;
}

.opacity-0 {
    opacity: 0;
}

/** width & height */
.w-full {
    width: 100%;
}

.w-1 {
    width: 4px;
}

.w-5 {
    width: 20px;
}

.w-6 {
    width: 24px;
}

.w-10 {
    width: 40px;
}

.w-12 {
    width: 48px;
}

.w-15 {
    width: 60px;
}

.w-20 {
    width: 80px;
}

.w-24 {
    width: 96px;
}

.w-30 {
    width: 120px;
}

.h-full {
    height: 100%;
}

.h-1 {
    height: 4px;
}

.h-5 {
    height: 20px;
}

.h-6 {
    height: 24px;
}

.h-8 {
    height: 32px;
}

.h-10 {
    height: 40px;
}

.h-12 {
    height: 48px;
}

.h-15 {
    height: 60px;
}

.h-20 {
    height: 80px;
}

.h-24 {
    height: 96px;
}

.h-30 {
    height: 120px;
}

.h-32 {
    height: 128px;
}

.h-40 {
    height: 160px;
}

/** background-size */
.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.bg-center {
    background-position: center;
}

/** styles */
.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.scale-100 {
    transform: scale(1);
}

.scale-x-100 {
    transform: scaleX(1);
}

.scale-y-100 {
    transform: scaleY(1);
}

.-scale-x-100 {
    transform: scaleX(-1);
}

.-scale-y-100 {
    transform: scaleY(-1);
}

/** color */
:root {
    --color-gray-0: #ffffff;
    --color-gray-1: #f9fafb;
    --color-gray-2: #f3f4f6;
    --color-gray-3: #e5e7eb;
    --color-gray-4: #d1d5db;
    --color-gray-5: #9ca3af;
    --color-gray-6: #6b7280;
    --color-gray-7: #111827;
}

.bg-gray-0 {
    background-color: var(--color-gray-0);
}

.bg-gray-1 {
    background-color: var(--color-gray-1);
}

.bg-gray-2 {
    background-color: var(--color-gray-2);
}

.bg-gray-3 {
    background-color: var(--color-gray-3);
}

.bg-gray-4 {
    background-color: var(--color-gray-4);
}

.bg-gray-5 {
    background-color: var(--color-gray-5);
}

.bg-gray-6 {
    background-color: var(--color-gray-6);
}

.bg-gray-7 {
    background-color: var(--color-gray-7);
}

.border-gray-0 {
    border-color: var(--color-gray-0);
}

.border-gray-1 {
    border-color: var(--color-gray-1);
}

.border-gray-2 {
    border-color: var(--color-gray-2);
}

.border-gray-3 {
    border-color: var(--color-gray-3);
}

.border-gray-4 {
    border-color: var(--color-gray-4);
}

.border-gray-5 {
    border-color: var(--color-gray-5);
}

.border-gray-6 {
    border-color: var(--color-gray-6);
}

.border-gray-7 {
    border-color: var(--color-gray-7);
}

:root {
    --color-red-2: #ef4444;
    --color-red-4: #c20000
}

.text-red-2 {
    color: var(--color-red-4);
}

.text-gray-3 {
    color: var(--color-gray-3);
}

.text-gray-5 {
    color: var(--color-gray-5);
}

.text-xs {
    font-size: 12px;
    line-height: 16px;
}

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

/** border */
.border-0 {
    border-width: 0px;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-4 {
    border-width: 4px;
}

.border-8 {
    border-width: 8px;
}

.border-b-0 {
    border-bottom-width: 0px;
}

.border-t {
    border-top-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-b-4 {
    border-bottom-width: 4px;
}

.border-b-8 {
    border-bottom-width: 8px;
}

/** barder-radius */
.rounded-none {
    border-radius: 0px;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-sm {
    border-radius: 0.125rem;
    /* 2px */
}

.rounded {
    border-radius: 0.25rem;
    /* 4px */
}

.rounded-md {
    border-radius: 0.375rem;
    /* 6px */
}

.rounded-lg {
    border-radius: 0.5rem;
    /* 8px */
}

.rounded-xl {
    border-radius: 0.75rem;
    /* 12px */
}

/** border-style */
.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

/** z-index */
.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-10 {
    z-index: 10;
}