planetposen/frontend/styles/spacing.scss

:root {
    --space-unit: 1.125em;
    --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: calc(1 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(12 * var(--space-unit));
    --component-padding: var(--space-xl)
}

@media (max-width: 992px) {
    :root {
        --space-unit: 1em;
        --component-padding: var(--space-lg)
    }
}

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

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

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

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

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

.margin-top--xl {
    margin-top:var(--space-xxl)
}

.margin-top--xxl {
    margin-top:var(--space-xxxl)
}

.margin-top--xxxl {
    margin-top:var(--space-xxxxl)
}

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

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

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

.margin-bottom--md {
    margin-bottom:var(--space-lg)
}

.margin-bottom--lg {
    margin-bottom:var(--space-xl)
}

.margin-bottom--xl {
    margin-bottom:var(--space-xxl)
}

.margin-bottom--xxl {
    margin-bottom:var(--space-xxxl)
}

.margin-bottom--xxxl {
    margin-bottom:var(--space-xxxxl)
}

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

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

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

.padding-top--md {
    padding-top:var(--space-lg)
}

.padding-top--lg {
    padding-top:var(--space-xl)
}

.padding-top--xl {
    padding-top:var(--space-xxl)
}

.padding-top--xxl {
    padding-top:var(--space-xxxl)
}

.padding-top--xxxl {
    padding-top:var(--space-xxxxl)
}

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

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

.padding-bottom--sm {
    padding-bottom:var(--space-md)
}

.padding-bottom--md {
    padding-bottom:var(--space-lg)
}

.padding-bottom--lg {
    padding-bottom:var(--space-xl)
}

.padding-bottom--xl {
    padding-bottom:var(--space-xxl)
}

.padding-bottom--xxl {
    padding-bottom:var(--space-xxxl)
}

.padding-bottom--xxxl {
    padding-bottom:var(--space-xxxxl)
}

@media (max-width: 992px) {
    .margin-top--xs {
        margin-top:var(--space-xs)
    }

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

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

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

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

    .margin-top--xxl {
        margin-top:var(--space-xxl)
    }

    .margin-top--xxxl {
        margin-top:var(--space-xxxl)
    }

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

    .margin-bottom, .margin-bottom--md {
        margin-bottom:var(--space-md)
    }

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

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

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

    .margin-bottom--xxl {
        margin-bottom:var(--space-xxl)
    }

    .margin-bottom--xxxl {
        margin-bottom:var(--space-xxxl)
    }

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

    .padding-top, .padding-top--md {
        padding-top:var(--space-md)
    }

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

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

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

    .padding-top--xxl {
        padding-top:var(--space-xxl)
    }

    .padding-top--xxxl {
        padding-top:var(--space-xxxl)
    }

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

    .padding-bottom, .padding-bottom--md {
        padding-bottom:var(--space-md)
    }

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

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

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

    .padding-bottom--xxl {
        padding-bottom:var(--space-xxl)
    }

    .padding-bottom--xxxl {
        padding-bottom:var(--space-xxxl)
    }
}