/* 
    Margins 
*/

/* top */
.mt-primary-2 {
    margin-top: 0.125rem; /* ~ 2px */
}

.mt-primary-4 {
    margin-top: 0.25rem; /* ~ 4px */
}

.mt-primary-6 {
    margin-top: 0.375rem; /* ~ 6px */
}

.mt-primary-8 {
    margin-top: 0.5rem; /* ~ 8px */
}

.mt-primary-10 {
    margin-top: 0.625rem; /* ~ 10px */
}

.mt-primary-12 {
    margin-top: 0.75rem; /* ~ 12px */
}

.mt-primary-14 {
    margin-top: 0.875rem; /* ~ 14px */
}

.mt-primary-16 {
    margin-top: 1rem; /* ~ 16px */
}

.mt-primary-18 {
    margin-top: 1.125rem; /* ~ 18px */
}

.mt-primary-20 {
    margin-top: 1.25rem; /* ~ 20px */
}

.mt-primary-22 {
    margin-top: 1.375rem; /* ~ 22px */
}

.mt-primary-24 {
    margin-top: 1.5rem; /* ~ 24px */
}

.mt-primary-26 {
    margin-top: 1.625rem; /* ~ 26px */
}

.mt-primary-28 {
    margin-top: 1.75rem; /* ~ 28px */
}

.mt-primary-30 {
    margin-top: 1.875rem; /* ~ 30px */
}

.mt-primary-32 {
    margin-top: 2rem; /* ~ 32px */
}

.mt-primary-34 {
    margin-top: 2.125rem; /* ~ 34px */
}

.mt-primary-36 {
    margin-top: 2.25rem; /* ~ 36px */
}

.mt-primary-38 {
    margin-top: 2.375rem; /* ~ 38px */
}
.mt-primary-40 {
    margin-top: 2.5rem; /* ~ 40px */
}
.mt-primary-42 {
    margin-top: 2.625rem; /* ~ 42px */
}

.mt-primary-44 {
    margin-top: 2.75rem; /* ~ 44px */
}

.mt-primary-46 {
    margin-top: 2.875rem; /* ~ 46px */
}

.mt-primary-48 {
    margin-top: 3rem; /* ~ 48px */
}

.mt-primary-50 {
    margin-top: 3.125rem; /* ~ 50px */
}

.mt-primary-52 {
    margin-top: 3.25rem; /* ~ 52px */
}

.mt-primary-54 {
    margin-top: 3.375rem; /* ~ 54px */
}
.mt-primary-56 {
    margin-top: 3.5rem; /* ~ 56px */
}
.mt-primary-58 {
    margin-top: 3.625rem; /* ~ 58px */
}


.mt-primary-80 {
    margin-top: 5rem; /* ~ 80px */
}
/* bottom */
.mb-primary-2 {
    margin-bottom: 0.125rem; /* ~ 2px */
}

.mb-primary-4 {
    margin-bottom: 0.25rem; /* ~ 4px */
}

.mb-primary-6 {
    margin-bottom: 0.375rem; /* ~ 6px */
}

.mb-primary-8 {
    margin-bottom: 0.5rem; /* ~ 8px */
}

.mb-primary-10 {
    margin-bottom: 0.625rem; /* ~ 10px */
}

.mb-primary-12 {
    margin-bottom: 0.75rem; /* ~ 12px */
}

.mb-primary-14 {
    margin-bottom: 0.875rem; /* ~ 14px */
}

.mb-primary-16 {
    margin-bottom: 1rem; /* ~ 16px */
}

.mb-primary-18 {
    margin-bottom: 1.125rem; /* ~ 18px */
}

.mb-primary-20 {
    margin-bottom: 1.25rem; /* ~ 20px */
}

.mb-primary-22 {
    margin-bottom: 1.375rem; /* ~ 22px */
}

.mb-primary-24 {
    margin-bottom: 1.5rem; /* ~ 24px */
}

.mb-primary-26 {
    margin-bottom: 1.625rem; /* ~ 26px */
}

.mb-primary-28 {
    margin-bottom: 1.75rem; /* ~ 28px */
}

.mb-primary-30 {
    margin-bottom: 1.875rem; /* ~ 30px */
}

.mb-primary-32 {
    margin-bottom: 2rem; /* ~ 32px */
}

.mb-primary-34 {
    margin-bottom: 2.125rem; /* ~ 34px */
}

.mb-primary-36 {
    margin-bottom: 2.25rem; /* ~ 36px */
}

.mb-primary-80 {
    margin-bottom: 5rem; /* ~ 80px */
}

/* left */
.ml-primary-2 {
    margin-left: 0.125rem; /* ~ 2px */
}

.ml-primary-4 {
    margin-left: 0.25rem; /* ~ 4px */
}

.ml-primary-6 {
    margin-left: 0.375rem; /* ~ 6px */
}

.ml-primary-8 {
    margin-left: 0.5rem; /* ~ 8px */
}

.ml-primary-10 {
    margin-left: 0.625rem; /* ~ 10px */
}

.ml-primary-12 {
    margin-left: 0.75rem; /* ~ 12px */
}

.ml-primary-14 {
    margin-left: 0.875rem; /* ~ 14px */
}

.ml-primary-16 {
    margin-left: 1rem; /* ~ 16px */
}

.ml-primary-18 {
    margin-left: 1.125rem; /* ~ 18px */
}

.ml-primary-20 {
    margin-left: 1.25rem; /* ~ 20px */
}

.ml-primary-22 {
    margin-left: 1.375rem; /* ~ 22px */
}

.ml-primary-24 {
    margin-left: 1.5rem; /* ~ 24px */
}

.ml-primary-26 {
    margin-left: 1.625rem; /* ~ 26px */
}

.ml-primary-28 {
    margin-left: 1.75rem; /* ~ 28px */
}

.ml-primary-30 {
    margin-left: 1.875rem; /* ~ 30px */
}

.ml-primary-32 {
    margin-left: 2rem; /* ~ 32px */
}

.ml-primary-34 {
    margin-left: 2.125rem; /* ~ 34px */
}

.ml-primary-36 {
    margin-left: 2.25rem; /* ~ 36px */
}

/* right */
.mr-primary-2 {
    padding-right: 0.125rem; /* ~ 2px */
}

.mr-primary-4 {
    padding-right: 0.25rem; /* ~ 4px */
}

.mr-primary-6 {
    padding-right: 0.375rem; /* ~ 6px */
}

.mr-primary-8 {
    padding-right: 0.5rem; /* ~ 8px */
}

.mr-primary-10 {
    padding-right: 0.625rem; /* ~ 10px */
}

.mr-primary-12 {
    padding-right: 0.75rem; /* ~ 12px */
}

.mr-primary-14 {
    padding-right: 0.875rem; /* ~ 14px */
}

.mr-primary-16 {
    padding-right: 1rem; /* ~ 16px */
}

.mr-primary-18 {
    padding-right: 1.125rem; /* ~ 18px */
}

.mr-primary-20 {
    padding-right: 1.25rem; /* ~ 20px */
}

.mr-primary-22 {
    padding-right: 1.375rem; /* ~ 22px */
}

.mr-primary-24 {
    padding-right: 1.5rem; /* ~ 24px */
}

.mr-primary-26 {
    padding-right: 1.625rem; /* ~ 26px */
}

.mr-primary-28 {
    padding-right: 1.75rem; /* ~ 28px */
}

.mr-primary-30 {
    padding-right: 1.875rem; /* ~ 30px */
}

.mr-primary-32 {
    padding-right: 2rem; /* ~ 32px */
}

.mr-primary-34 {
    padding-right: 2.125rem; /* ~ 34px */
}

.mr-primary-36 {
    padding-right: 2.25rem; /* ~ 36px */
}

/* 
    Paddings 
*/

/* top */
.pt-primary-2 {
    padding-top: 0.125rem; /* ~ 2px */
}

.pt-primary-4 {
    padding-top: 0.25rem; /* ~ 4px */
}

.pt-primary-6 {
    padding-top: 0.375rem; /* ~ 6px */
}

.pt-primary-8 {
    padding-top: 0.5rem; /* ~ 8px */
}

.pt-primary-10 {
    padding-top: 0.625rem; /* ~ 10px */
}

.pt-primary-12 {
    padding-top: 0.75rem; /* ~ 12px */
}

.pt-primary-14 {
    padding-top: 0.875rem; /* ~ 14px */
}

.pt-primary-16 {
    padding-top: 1rem; /* ~ 16px */
}

.pt-primary-18 {
    padding-top: 1.125rem; /* ~ 18px */
}

.pt-primary-20 {
    padding-top: 1.25rem; /* ~ 20px */
}

.pt-primary-22 {
    padding-top: 1.375rem; /* ~ 22px */
}

.pt-primary-24 {
    padding-top: 1.5rem; /* ~ 24px */
}

.pt-primary-26 {
    padding-top: 1.625rem; /* ~ 26px */
}

.pt-primary-28 {
    padding-top: 1.75rem; /* ~ 28px */
}

.pt-primary-30 {
    padding-top: 1.875rem; /* ~ 30px */
}

.pt-primary-32 {
    padding-top: 2rem; /* ~ 32px */
}

.pt-primary-34 {
    padding-top: 2.125rem; /* ~ 34px */
}

.pt-primary-36 {
    padding-top: 2.25rem; /* ~ 36px */
}

/* bottom */
.pb-primary-2 {
    padding-bottom: 0.125rem; /* ~ 2px */
}

.pb-primary-4 {
    padding-bottom: 0.25rem; /* ~ 4px */
}

.pb-primary-6 {
    padding-bottom: 0.375rem; /* ~ 6px */
}

.pb-primary-8 {
    padding-bottom: 0.5rem; /* ~ 8px */
}

.pb-primary-10 {
    padding-bottom: 0.625rem; /* ~ 10px */
}

.pb-primary-12 {
    padding-bottom: 0.75rem; /* ~ 12px */
}

.pb-primary-14 {
    padding-bottom: 0.875rem; /* ~ 14px */
}

.pb-primary-16 {
    padding-bottom: 1rem; /* ~ 16px */
}

.pb-primary-18 {
    padding-bottom: 1.125rem; /* ~ 18px */
}

.pb-primary-20 {
    padding-bottom: 1.25rem; /* ~ 20px */
}

.pb-primary-22 {
    padding-bottom: 1.375rem; /* ~ 22px */
}

.pb-primary-24 {
    padding-bottom: 1.5rem; /* ~ 24px */
}

.pb-primary-26 {
    padding-bottom: 1.625rem; /* ~ 26px */
}

.pb-primary-28 {
    padding-bottom: 1.75rem; /* ~ 28px */
}

.pb-primary-30 {
    padding-bottom: 1.875rem; /* ~ 30px */
}

.pb-primary-32 {
    padding-bottom: 2rem; /* ~ 32px */
}

.pb-primary-34 {
    padding-bottom: 2.125rem; /* ~ 34px */
}

.pb-primary-36 {
    padding-bottom: 2.25rem; /* ~ 36px */
}

.pb-primary-160 {
    padding-bottom: 10rem; /* ~ 160px (for pages have grey bg)*/
}

/* left */
.pl-primary-2 {
    padding-left: 0.125rem; /* ~ 2px */
}

.pl-primary-4 {
    padding-left: 0.25rem; /* ~ 4px */
}

.pl-primary-6 {
    padding-left: 0.375rem; /* ~ 6px */
}

.pl-primary-8 {
    padding-left: 0.5rem; /* ~ 8px */
}

.pl-primary-10 {
    padding-left: 0.625rem; /* ~ 10px */
}

.pl-primary-12 {
    padding-left: 0.75rem; /* ~ 12px */
}

.pl-primary-14 {
    padding-left: 0.875rem; /* ~ 14px */
}

.pl-primary-16 {
    padding-left: 1rem; /* ~ 16px */
}

.pl-primary-18 {
    padding-left: 1.125rem; /* ~ 18px */
}

.pl-primary-20 {
    padding-left: 1.25rem; /* ~ 20px */
}

.pl-primary-22 {
    padding-left: 1.375rem; /* ~ 22px */
}

.pl-primary-24 {
    padding-left: 1.5rem; /* ~ 24px */
}

.pl-primary-26 {
    padding-left: 1.625rem; /* ~ 26px */
}

.pl-primary-28 {
    padding-left: 1.75rem; /* ~ 28px */
}

.pl-primary-30 {
    padding-left: 1.875rem; /* ~ 30px */
}

.pl-primary-32 {
    padding-left: 2rem; /* ~ 32px */
}

.pl-primary-34 {
    padding-left: 2.125rem; /* ~ 34px */
}

.pl-primary-36 {
    padding-left: 2.25rem; /* ~ 36px */
}

/* right */
.pr-primary-2 {
    padding-right: 0.125rem; /* ~ 2px */
}

.pr-primary-4 {
    padding-right: 0.25rem; /* ~ 4px */
}

.pr-primary-6 {
    padding-right: 0.375rem; /* ~ 6px */
}

.pr-primary-8 {
    padding-right: 0.5rem; /* ~ 8px */
}

.pr-primary-10 {
    padding-right: 0.625rem; /* ~ 10px */
}

.pr-primary-12 {
    padding-right: 0.75rem; /* ~ 12px */
}

.pr-primary-14 {
    padding-right: 0.875rem; /* ~ 14px */
}

.pr-primary-16 {
    padding-right: 1rem; /* ~ 16px */
}

.pr-primary-18 {
    padding-right: 1.125rem; /* ~ 18px */
}

.pr-primary-20 {
    padding-right: 1.25rem; /* ~ 20px */
}

.pr-primary-22 {
    padding-right: 1.375rem; /* ~ 22px */
}

.pr-primary-24 {
    padding-right: 1.5rem; /* ~ 24px */
}

.pr-primary-26 {
    padding-right: 1.625rem; /* ~ 26px */
}

.pr-primary-28 {
    padding-right: 1.75rem; /* ~ 28px */
}

.pr-primary-30 {
    padding-right: 1.875rem; /* ~ 30px */
}

.pr-primary-32 {
    padding-right: 2rem; /* ~ 32px */
}

.pr-primary-34 {
    padding-right: 2.125rem; /* ~ 34px */
}

.pr-primary-36 {
    padding-right: 2.25rem; /* ~ 36px */
}

/* Gutters */
.gap-x-2 {
    gap: 0 0.5rem;
}