﻿:root {
    --spacing-2px: 2px;
    --spacing-4px: 4px;
    --spacing-8px: 8px;
    --spacing-12px: 12px;
    --spacing-16px: 16px;
    --spacing-20px: 20px;
    --spacing-24px: 24px;
    --spacing-32px: 32px;
    --spacing-40px: 40px;
    --spacing-48px: 48px;
    --spacing-72px: 72px;
    --spacing-96px: 96px;
    --spacing-124px: 124px;
    --spacing-160px: 160px;
}

/* Spacing Utilities - Margins and Paddings */

/* Margin - All Sides */
.m-2px {
    margin: var(--spacing-2px);
}

.m-4px {
    margin: var(--spacing-4px);
}

.m-8px {
    margin: var(--spacing-8px);
}

.m-12px {
    margin: var(--spacing-12px);
}

.m-16px {
    margin: var(--spacing-16px);
}

.m-20px {
    margin: var(--spacing-20px);
}

.m-24px {
    margin: var(--spacing-24px);
}

.m-32px {
    margin: var(--spacing-32px);
}

.m-40px {
    margin: var(--spacing-40px);
}

.m-48px {
    margin: var(--spacing-48px);
}

.m-72px {
    margin: var(--spacing-72px);
}

.m-96px {
    margin: var(--spacing-96px);
}

.m-124px {
    margin: var(--spacing-124px);
}

.m-160px {
    margin: var(--spacing-160px);
}

/* Margin - Top */
.mt-2px {
    margin-top: var(--spacing-2px);
}

.mt-4px {
    margin-top: var(--spacing-4px);
}

.mt-8px {
    margin-top: var(--spacing-8px);
}

.mt-12px {
    margin-top: var(--spacing-12px);
}

.mt-16px {
    margin-top: var(--spacing-16px);
}

.mt-20px {
    margin-top: var(--spacing-20px);
}

.mt-24px {
    margin-top: var(--spacing-24px);
}

.mt-32px {
    margin-top: var(--spacing-32px);
}

.mt-40px {
    margin-top: var(--spacing-40px);
}

.mt-48px {
    margin-top: var(--spacing-48px);
}

.mt-72px {
    margin-top: var(--spacing-72px);
}

.mt-96px {
    margin-top: var(--spacing-96px);
}

.mt-124px {
    margin-top: var(--spacing-124px);
}

.mt-160px {
    margin-top: var(--spacing-160px);
}

/* Margin - Right */
.mr-2px {
    margin-right: var(--spacing-2px);
}

.mr-4px {
    margin-right: var(--spacing-4px);
}

.mr-8px {
    margin-right: var(--spacing-8px);
}

.mr-12px {
    margin-right: var(--spacing-12px);
}

.mr-16px {
    margin-right: var(--spacing-16px);
}

.mr-20px {
    margin-right: var(--spacing-20px);
}

.mr-24px {
    margin-right: var(--spacing-24px);
}

.mr-32px {
    margin-right: var(--spacing-32px);
}

.mr-40px {
    margin-right: var(--spacing-40px);
}

.mr-48px {
    margin-right: var(--spacing-48px);
}

.mr-72px {
    margin-right: var(--spacing-72px);
}

.mr-96px {
    margin-right: var(--spacing-96px);
}

.mr-124px {
    margin-right: var(--spacing-124px);
}

.mr-160px {
    margin-right: var(--spacing-160px);
}

/* Margin - Bottom */
.mb-2px {
    margin-bottom: var(--spacing-2px);
}

.mb-4px {
    margin-bottom: var(--spacing-4px);
}

.mb-8px {
    margin-bottom: var(--spacing-8px);
}

.mb-12px {
    margin-bottom: var(--spacing-12px);
}

.mb-16px {
    margin-bottom: var(--spacing-16px);
}

.mb-20px {
    margin-bottom: var(--spacing-20px);
}

.mb-24px {
    margin-bottom: var(--spacing-24px);
}

.mb-32px {
    margin-bottom: var(--spacing-32px);
}

.mb-40px {
    margin-bottom: var(--spacing-40px);
}

.mb-48px {
    margin-bottom: var(--spacing-48px);
}

.mb-72px {
    margin-bottom: var(--spacing-72px);
}

.mb-96px {
    margin-bottom: var(--spacing-96px);
}

.mb-124px {
    margin-bottom: var(--spacing-124px);
}

.mb-160px {
    margin-bottom: var(--spacing-160px);
}

/* Margin - Left */
.ml-2px {
    margin-left: var(--spacing-2px);
}

.ml-4px {
    margin-left: var(--spacing-4px);
}

.ml-8px {
    margin-left: var(--spacing-8px);
}

.ml-12px {
    margin-left: var(--spacing-12px);
}

.ml-16px {
    margin-left: var(--spacing-16px);
}

.ml-20px {
    margin-left: var(--spacing-20px);
}

.ml-24px {
    margin-left: var(--spacing-24px);
}

.ml-32px {
    margin-left: var(--spacing-32px);
}

.ml-40px {
    margin-left: var(--spacing-40px);
}

.ml-48px {
    margin-left: var(--spacing-48px);
}

.ml-72px {
    margin-left: var(--spacing-72px);
}

.ml-96px {
    margin-left: var(--spacing-96px);
}

.ml-124px {
    margin-left: var(--spacing-124px);
}

.ml-160px {
    margin-left: var(--spacing-160px);
}

/* Spacing Utilities - Padding */

/* Padding - All Sides */
.p-2px {
    padding: var(--spacing-2px);
}

.p-4px {
    padding: var(--spacing-4px);
}

.p-8px {
    padding: var(--spacing-8px);
}

.p-12px {
    padding: var(--spacing-12px);
}

.p-16px {
    padding: var(--spacing-16px);
}

.p-20px {
    padding: var(--spacing-20px);
}

.p-24px {
    padding: var(--spacing-24px);
}

.p-32px {
    padding: var(--spacing-32px);
}

.p-40px {
    padding: var(--spacing-40px);
}

.p-48px {
    padding: var(--spacing-48px);
}

.p-72px {
    padding: var(--spacing-72px);
}

.p-96px {
    padding: var(--spacing-96px);
}

.p-124px {
    padding: var(--spacing-124px);
}

.p-160px {
    padding: var(--spacing-160px);
}

/* Padding - Top */
.pt-2px {
    padding-top: var(--spacing-2px);
}

.pt-4px {
    padding-top: var(--spacing-4px);
}

.pt-8px {
    padding-top: var(--spacing-8px);
}

.pt-12px {
    padding-top: var(--spacing-12px);
}

.pt-16px {
    padding-top: var(--spacing-16px);
}

.pt-20px {
    padding-top: var(--spacing-20px);
}

.pt-24px {
    padding-top: var(--spacing-24px);
}

.pt-32px {
    padding-top: var(--spacing-32px);
}

.pt-40px {
    padding-top: var(--spacing-40px);
}

.pt-48px {
    padding-top: var(--spacing-48px);
}

.pt-72px {
    padding-top: var(--spacing-72px);
}

.pt-96px {
    padding-top: var(--spacing-96px);
}

.pt-124px {
    padding-top: var(--spacing-124px);
}

.pt-160px {
    padding-top: var(--spacing-160px);
}

/* Padding - Right */
.pr-2px {
    padding-right: var(--spacing-2px);
}

.pr-4px {
    padding-right: var(--spacing-4px);
}

.pr-8px {
    padding-right: var(--spacing-8px);
}

.pr-12px {
    padding-right: var(--spacing-12px);
}

.pr-16px {
    padding-right: var(--spacing-16px);
}

.pr-20px {
    padding-right: var(--spacing-20px);
}

.pr-24px {
    padding-right: var(--spacing-24px);
}

.pr-32px {
    padding-right: var(--spacing-32px);
}

.pr-40px {
    padding-right: var(--spacing-40px);
}

.pr-48px {
    padding-right: var(--spacing-48px);
}

.pr-72px {
    padding-right: var(--spacing-72px);
}

.pr-96px {
    padding-right: var(--spacing-96px);
}

.pr-124px {
    padding-right: var(--spacing-124px);
}

.pr-160px {
    padding-right: var(--spacing-160px);
}

/* Padding - Bottom */
.pb-2px {
    padding-bottom: var(--spacing-2px);
}

.pb-4px {
    padding-bottom: var(--spacing-4px);
}

.pb-8px {
    padding-bottom: var(--spacing-8px);
}

.pb-12px {
    padding-bottom: var(--spacing-12px);
}

.pb-16px {
    padding-bottom: var(--spacing-16px);
}

.pb-20px {
    padding-bottom: var(--spacing-20px);
}

.pb-24px {
    padding-bottom: var(--spacing-24px);
}

.pb-32px {
    padding-bottom: var(--spacing-32px);
}

.pb-40px {
    padding-bottom: var(--spacing-40px);
}

.pb-48px {
    padding-bottom: var(--spacing-48px);
}

.pb-72px {
    padding-bottom: var(--spacing-72px);
}

.pb-96px {
    padding-bottom: var(--spacing-96px);
}

.pb-124px {
    padding-bottom: var(--spacing-124px);
}

.pb-160px {
    padding-bottom: var(--spacing-160px);
}

/* Padding - Left */
.pl-2px {
    padding-left: var(--spacing-2px);
}

.pl-4px {
    padding-left: var(--spacing-4px);
}

.pl-8px {
    padding-left: var(--spacing-8px);
}

.pl-12px {
    padding-left: var(--spacing-12px);
}

.pl-16px {
    padding-left: var(--spacing-16px);
}

.pl-20px {
    padding-left: var(--spacing-20px);
}

.pl-24px {
    padding-left: var(--spacing-24px);
}

.pl-32px {
    padding-left: var(--spacing-32px);
}

.pl-40px {
    padding-left: var(--spacing-40px);
}

.pl-48px {
    padding-left: var(--spacing-48px);
}

.pl-72px {
    padding-left: var(--spacing-72px);
}

.pl-96px {
    padding-left: var(--spacing-96px);
}

.pl-124px {
    padding-left: var(--spacing-124px);
}

.pl-160px {
    padding-left: var(--spacing-160px);
}
