.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-18  {
  width: 72px;
}
.w-15 {
  width: 60px;
}
.w-20 {
  width: 80px;
}
.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-18 {
    height: 72px;
}
.h-20 {
  height: 80px;
}
.h-32 {
  height: 128px;
}
.h-40 {
  height: 160px;
}
/** background-size */
.bg-cover {
  background-size: cover;
}
.bg-contain {
  background-size: contain;
}
/** 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;
}