:root {
    --spacing-xs: 0.5rem;
    --spacing-sm: calc(var(--spacing-xs) * 2); /* 1rem */
    --spacing-md: calc(var(--spacing-xs) * 3); /* 1.5rem */
    --spacing-lg: calc(var(--spacing-xs) * 4); /* 2rem */
    --spacing-xl: calc(var(--spacing-xs) * 5); /* 2.5rem */
    --spacing-2xl: calc(var(--spacing-xs) * 6); /* 3rem */
    --spacing-3xl: calc(var(--spacing-xs) * 7); /* 3.5rem */
    --spacing-4xl: calc(var(--spacing-xs) * 8); /* 4rem */
}

.sph-padding-xs {
    padding: var(--spacing-xs);
}

.sph-pt-xs {
    padding-top: var(--spacing-xs) !important;
}

.sph-pb-xs {
    padding-bottom: var(--spacing-xs) !important;
}

.sph-ps-xs {
    padding-left: var(--spacing-xs) !important;
}

.sph-pe-xs {
    padding-right: var(--spacing-xs) !important;
}

.sph-padding-sm {
    padding: var(--spacing-sm);
}

.sph-pt-sm {
    padding-top: var(--spacing-sm) !important;
}

.sph-pb-sm {
    padding-bottom: var(--spacing-sm) !important;
}

.sph-ps-sm {
    padding-left: var(--spacing-sm) !important;
}

.sph-pe-sm {
    padding-right: var(--spacing-sm) !important;
}

.sph-padding-md {
    padding: var(--spacing-md);
}

.sph-pt-md {
    padding-top: var(--spacing-md) !important;
}

.sph-pb-md {
    padding-bottom: var(--spacing-md) !important;
}

.sph-ps-md {
    padding-left: var(--spacing-md) !important;
}

.sph-pe-md {
    padding-right: var(--spacing-md) !important;
}

.sph-padding-lg {
    padding: var(--spacing-lg);
}

.sph-pt-lg {
    padding-top: var(--spacing-lg) !important;
}

.sph-pb-lg {
    padding-bottom: var(--spacing-lg) !important;
}

.sph-ps-lg {
    padding-left: var(--spacing-lg) !important;
}

.sph-pe-lg {
    padding-right: var(--spacing-lg) !important;
}

.sph-padding-xl {
    padding: var(--spacing-xl);
}

.sph-pt-xl {
    padding-top: var(--spacing-xl) !important;
}

.sph-pb-xl {
    padding-bottom: var(--spacing-xl) !important;
}

.sph-ps-xl {
    padding-left: var(--spacing-xl) !important;
}

.sph-pe-xl {
    padding-right: var(--spacing-xl) !important;
}

.sph-padding-2xl {
    padding: var(--spacing-2xl);
}

.sph-pt-2xl {
    padding-top: var(--spacing-2xl) !important;
}

.sph-pb-2xl {
    padding-bottom: var(--spacing-2xl) !important;
}

.sph-ps-2xl {
    padding-left: var(--spacing-2xl) !important;
}

.sph-pe-2xl {
    padding-right: var(--spacing-2xl) !important;
}

.sph-padding-3xl {
    padding: var(--spacing-3xl);
}

.sph-pt-3xl {
    padding-top: var(--spacing-3xl) !important;
}

.sph-pb-3xl {
    padding-bottom: var(--spacing-3xl) !important;
}

.sph-ps-3xl {
    padding-left: var(--spacing-3xl) !important;
}

.sph-pe-3xl {
    padding-right: var(--spacing-3xl) !important;
}

.sph-padding-4xl {
    padding: var(--spacing-4xl);
}

.sph-pt-4xl {
    padding-top: var(--spacing-4xl) !important;
}

.sph-pb-4xl {
    padding-bottom: var(--spacing-4xl) !important;
}

.sph-ps-4xl {
    padding-left: var(--spacing-4xl) !important;
}

.sph-pe-4xl {
    padding-right: var(--spacing-4xl) !important;
}

.sph-icon-md {
    height: var(--spacing-md) !important;
    width: var(--spacing-md) !important;
}

.sph-margin-xs {
    margin: var(--spacing-xs);
}

.sph-mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.sph-mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.sph-ms-xs {
    margin-left: var(--spacing-xs) !important;
}

.sph-me-xs {
    margin-right: var(--spacing-xs) !important;
}

.sph-margin-sm {
    margin: var(--spacing-sm);
}

.sph-mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.sph-mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.sph-ms-sm {
    margin-left: var(--spacing-sm) !important;
}

.sph-me-sm {
    margin-right: var(--spacing-sm) !important;
}

.sph-margin-md {
    margin: var(--spacing-md);
}

.sph-mt-md {
    margin-top: var(--spacing-md) !important;
}

.sph-mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.sph-ms-md {
    margin-left: var(--spacing-md) !important;
}

.sph-me-md {
    margin-right: var(--spacing-md) !important;
}

.sph-margin-lg {
    margin: var(--spacing-lg);
}

.sph-mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.sph-mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.sph-ms-lg {
    margin-left: var(--spacing-lg) !important;
}

.sph-me-lg {
    margin-right: var(--spacing-lg) !important;
}

.sph-margin-xl {
    margin: var(--spacing-xl);
}

.sph-mt-xl {
    margin-top: var(--spacing-xl) !important;
}

.sph-mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

.sph-ms-xl {
    margin-left: var(--spacing-xl) !important;
}

.sph-me-xl {
    margin-right: var(--spacing-xl) !important;
}

.sph-margin-2xl {
    margin: var(--spacing-2xl);
}

.sph-mt-2xl {
    margin-top: var(--spacing-2xl) !important;
}

.sph-mb-2xl {
    margin-bottom: var(--spacing-2xl) !important;
}

.sph-ms-2xl {
    margin-left: var(--spacing-2xl) !important;
}

.sph-me-2xl {
    margin-right: var(--spacing-2xl) !important;
}

.sph-margin-3xl {
    margin: var(--spacing-3xl);
}

.sph-mt-3xl {
    margin-top: var(--spacing-3xl) !important;
}

.sph-mb-3xl {
    margin-bottom: var(--spacing-3xl) !important;
}

.sph-ms-3xl {
    margin-left: var(--spacing-3xl) !important;
}

.sph-me-3xl {
    margin-right: var(--spacing-3xl) !important;
}

.sph-margin-4xl {
    margin: var(--spacing-4xl);
}

.sph-mt-4xl {
    margin-top: var(--spacing-4xl) !important;
}

.sph-mb-4xl {
    margin-bottom: var(--spacing-4xl) !important;
}

.sph-ms-4xl {
    margin-left: var(--spacing-4xl) !important;
}

.sph-me-4xl {
    margin-right: var(--spacing-4xl) !important;
}