:root {
    --spacing-0: 0px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-40: 40px;
    --spacing-64: 64px;
}

/* padding */
.spacing_0 {
    padding: var(--spacing-0);
}
.spacing_4 {
    padding: var(--spacing-4);
}
.spacing_6 {
    padding: var(--spacing-6);
}
.spacing_8 {
    padding: var(--spacing-8);
}
.spacing_10 {
    padding: var(--spacing-10);
}
.spacing_12 {
    padding: var(--spacing-12);
}
.spacing_16 {
    padding: var(--spacing-16);
}
.spacing_20 {
    padding: var(--spacing-20);
}
.spacing_22 {
    padding: var(--spacing-22);
}
.spacing_24 {
    padding: var(--spacing-24);
}
.spacing_40 {
    padding: var(--spacing-40);
}
@media (min-width: 768px) {
    .spacing-md_r20 {
        padding-right: var(--spacing-20);
    }
}

/* gaps */
.gap_0 {
    gap: var(--spacing-0);
}
.gap_4 {
    gap: var(--spacing-4);
}
.gap_6 {
    gap: var(--spacing-6);
}
.gap_8 {
    gap: var(--spacing-8);
}
.gap_10 {
    gap: var(--spacing-10);
}
.gap_12 {
    gap: var(--spacing-12);
}
.gap_14 {
    gap: var(--spacing-14);
}
.gap_16 {
    gap: var(--spacing-16);
}
.gap_18 {
    gap: var(--spacing-18);
}
.gap_20 {
    gap: var(--spacing-20);
}
.gap_24 {
    gap: var(--spacing-24);
}
.gap_40 {
    gap: var(--spacing-40);
}
.gap_64 {
    gap: var(--spacing-64);
}
@media (min-width: 768px) {
    .gap-md_40 {
        gap: var(--spacing-40);
    }
}