:root {
    --size-default: 0.25rem;
}

.w-auto {
    width: auto;
}

.w-40 {
    width: 40%;
}

.mw-50 {
    max-width: 50%;
}

.w-100 {
    width: 100%;
}

.m-0 {
    margin: 0;
}

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

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

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

.py-16 {
    padding-block: calc(16 * var(--size-default));
}


.m-4 {
    margin: calc(4 * var(--size-default));
}

.pl-2 {
    padding-left: calc(2 * var(--size-default)) !important;
}

.pl-6 {
    padding-left: calc(6 * var(--size-default)) !important;
}

.pl-8 {
    padding-left: calc(8 * var(--size-default)) !important;
}

.pr-4 {
    padding-right: calc(4 * var(--size-default));
}

.mr-4 {
    margin-right: calc(4 * var(--size-default));
}

.mt-4 {
    margin-top: calc(4 * var(--size-default));
}

.mt-8 {
    margin-top: calc(8 * var(--size-default));
}

.pt-4 {
    padding-top: calc(4 * var(--size-default));
}

.pt-8 {
    padding-top: calc(8 * var(--size-default));
}

.pb-8 {
    padding-bottom: calc(8 * var(--size-default));
}