.p-2{
    padding: calc(var(--spacing) * 2);
}

.p-2\.5{
    padding: calc(var(--spacing) * 2.5);
}

.p-3{
    padding: calc(var(--spacing) * 3);
}

.p-4{
    padding: calc(var(--spacing) * 4);
}

.p-5{
    padding: calc(var(--spacing) * 5);
}

.p-6{
    padding: calc(var(--spacing) * 6);
}

.p-8{
    padding: calc(var(--spacing) * 8);
}

/* padding inline */
.px-2\.5{
    padding-inline: calc(var(--spacing) * 2.5);
}

.px-3{
    padding-inline: calc(var(--spacing) * 3);
}

.px-4{
    padding-inline: calc(var(--spacing) * 4);
}

.px-5{
    padding-inline: calc(var(--spacing) * 5);
}

.px-6{
    padding-inline: calc(var(--spacing) * 6);
}

/* padding-block */
.py-1{
    padding-block: calc(var(--spacing) * 1);
}

.py-1\.5{
    padding-block: calc(var(--spacing) * 1.5);
}

.py-2{
    padding-block: calc(var(--spacing) * 2);
}

.py-2\.5{
    padding-block: calc(var(--spacing) * 2.5);
}

.py-3{
    padding-block: calc(var(--spacing) * 3);
}

.py-3\.5{
    padding-block: calc(var(--spacing) * 3.5);
}

.py-8{
    padding-block: calc(var(--spacing) * 8);
}

.py-end-8{
    padding-block-end: calc(var(--spacing) * 8);
}

/* left */
.left-3{
    left: calc(var(--spacing) * 3);
}

.pl-9{
    padding-left: calc(var(--spacing) * 9);
}

/* right */
.pr-8{
    padding-right: calc(var(--spacing) * 8);
}

/* top */
.top-1\/2{
    top: calc(1/2 * 100%);
}

/* translation */
.-translate-y-1\/2{
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

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

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

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

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

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

/* Gap */
.gap-05{
    gap: calc(var(--spacing)* .5);
}

.gap-1{
    gap: calc(var(--spacing)* 1);
}

.gap-1\.5{
    gap: calc(var(--spacing)* 1.5);
}

.gap-6{
    gap: calc(var(--spacing) * 6);
}

.gap-5{
    gap: calc(var(--spacing) * 5);
}

.gap-4{
    gap: calc(var(--spacing) * 4);
}

.gap-3{
    gap: calc(var(--spacing) * 3);
}

.gap-2{
    gap: calc(var(--spacing) * 2);
}

.gap-10{
    gap: calc(var(--spacing) * 10);
}

/* Margin */
.ml-auto{
    margin-left: auto;
}

.mx-1{
    margin-inline: calc(var(--spacing) * 1);
}

.max-w-xl{
    max-width: var(--container-xl);
}

.max-w-2xl{
    max-width: var(--container-2xl);
}

.max-w-4xl {
    max-width: var(--container-4xl);
}

.max-h-90vh{
    max-height: 90vh;
}

.max-h-40{
    max-height: calc(var(--spacing) * 40);
}

.h-screen {
    height: 100vh;
}

.button-inherits{
    font: inherit;
}

.leading-none { 
    line-height: 1; 
}

.leading-normal{
    line-height: 1.5;
}

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

.top-3 {
    top: calc(var(--spacing) * 3);
}

.right-3 {
    right: calc(var(--spacing) * 3);
}

.top-4 {
    top: calc(var(--spacing) * 4);
}

.right-4 {
    right: calc(var(--spacing) * 4);
}