:root {
    --space-margin: 8px;

    --space-unit: 1em;
    --space-xxs:  calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1 * var(--space-unit));
    --space-lg:   calc(1.25 * var(--space-unit));
    --space-xl:   calc(1.5 * var(--space-unit));
}

.margin-xs {
    margin: var(--space-xs);
}

.margin-sm {
    margin: var(--space-sm);
}

.margin-md {
    margin: var(--space-md);
}

.margin-lg {
    margin: var(--space-lg);
}

.margin-xl {
    margin: var(--space-xl);
}

.margin-auto {
    margin: auto;
}

.margin-0,
.margin-none {
    margin: 0;
}

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

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-sm {
    margin-bottom: var(--space-sm);
}

.margin-bottom-sm {
    margin-bottom: var(--space-sm);
}

.margin-left-sm {
    margin-left: var(--space-sm);
}

.margin-left-lg {
    margin-left: var(--space-lg);
}

.margin-right-lg {
    margin-right: var(--space-lg);
}

.margin-right-sm {
    margin-right: var(--space-sm);
}

.margin-y-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.margin-y-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.margin-y-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.margin-top-md {
    margin-top: var(--space-md);
}

.margin-top-sm {
    margin-top: var(--space-sm);
}

.margin-top-xs {
    margin-top: var(--space-xs);
}

.margin-top-lg {
    margin-top: var(--space-lg);
}

.margin-y-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.margin-y-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.margin-y-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.margin-x-0 {
    margin-right: 0;
    margin-left: 0;
}

.margin-x-xs {
    margin-right: var(--space-xs);
    margin-left: var(--space-xs);
}

.margin-x-sm {
    margin-right: var(--space-sm);
    margin-left: var(--space-sm);
}

.margin-x-md {
    margin-right: var(--space-md);
    margin-left: var(--space-md);
}

.margin-x-lg {
    margin-right: var(--space-lg);
    margin-left: var(--space-lg);
}

.margin-x-xl {
    margin-right: var(--space-xl);
    margin-left: var(--space-xl);
}

.padding-0,
.padding-none {
    padding: 0;
}

.padding-xs {
    padding: var(--space-xs);
}

.padding-sm {
    padding: var(--space-sm);
}

.padding-md {
    padding: var(--space-md);
}

.padding-lg {
    padding: var(--space-lg);
}

.padding-xl {
    padding: var(--space-xl);
}

.padding-top-0 {
    padding-top: 0;
}

.padding-top-40 {
    padding-top: 40px;
}

.padding-top-sm {
    padding-top: var(--space-sm);
}

.padding-right-sm {
    padding-right: var(--space-sm);
}

.padding-left-xs {
    padding-left: var(--space-xs);
}

.padding-left-sm {
    padding-left: var(--space-sm);
}

.padding-bottom-0 {
    padding-bottom: 0;
}

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

.padding-bottom-xs {
    padding-bottom: var(--space-xs);
}

.padding-y-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.padding-y-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
}

.padding-y-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.padding-y-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.padding-y-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.padding-y-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.padding-x-0 {
    padding-right: 0;
    padding-left: 0;
}

.padding-x-xs {
    padding-right: var(--space-xs);
    padding-left: var(--space-xs);
}

.padding-x-sm {
    padding-right: var(--space-sm);
    padding-left: var(--space-sm);
}

.padding-x-md {
    padding-right: var(--space-md);
    padding-left: var(--space-md);
}

.padding-x-lg {
    padding-right: var(--space-lg);
    padding-left: var(--space-lg);
}

.padding-x-xl {
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
}