@novicell/css-utils/dist/src/spacing.css

A CSS utility class package inspired by Bootstrap 4 CSS utilities and configurable via CSS Custom Properties and PostCSS.

/*
// Spacing
*/

/* Without breakpoints */
/* Zero and half values */
.m-0 {
      margin: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.mt-0 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.mr-0 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.mb-0 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.ml-0 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.my-0 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.mx-0 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
      margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.m-1 {
      margin: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.mt-1 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.mr-1 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.mb-1 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.ml-1 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.my-1 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.mx-1 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
      margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
/* The rest */
.m-2 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.mt-2 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.mr-2 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.mb-2 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.ml-2 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.my-2 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.mx-2 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.m-3 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.mt-3 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.mr-3 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.mb-3 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.ml-3 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.my-3 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.mx-3 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.m-4 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.mt-4 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.mr-4 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.mb-4 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.ml-4 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.my-4 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.mx-4 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.m-5 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.mt-5 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.mr-5 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.mb-5 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.ml-5 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.my-5 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.mx-5 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.m-6 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.mt-6 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.mr-6 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.mb-6 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.ml-6 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.my-6 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.mx-6 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.m-7 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.mt-7 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.mr-7 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.mb-7 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.ml-7 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.my-7 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.mx-7 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.m-8 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.mt-8 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.mr-8 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.mb-8 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.ml-8 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.my-8 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.mx-8 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.m-9 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.mt-9 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.mr-9 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.mb-9 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.ml-9 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.my-9 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.mx-9 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.m-10 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.mt-10 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.mr-10 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.mb-10 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.ml-10 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.my-10 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.mx-10 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.m-11 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.mt-11 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.mr-11 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.mb-11 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.ml-11 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.my-11 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.mx-11 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.m-12 {
      margin: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.mt-12 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.mr-12 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.mb-12 {
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.ml-12 {
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.my-12 {
      margin-top: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
      margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.mx-12 {
      margin-right: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
      margin-left: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
/* Zero and half values */
.p-0 {
      padding: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.pt-0 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.pr-0 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.pb-0 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.pl-0 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.py-0 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.px-0 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
      padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
    }
.p-1 {
      padding: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.pt-1 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.pr-1 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.pb-1 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.pl-1 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.py-1 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
.px-1 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
      padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
    }
/* The rest */
.p-2 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.pt-2 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.pr-2 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.pb-2 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.pl-2 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.py-2 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.px-2 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
    }
.p-3 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.pt-3 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.pr-3 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.pb-3 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.pl-3 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.py-3 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.px-3 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
    }
.p-4 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.pt-4 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.pr-4 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.pb-4 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.pl-4 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.py-4 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.px-4 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
    }
.p-5 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.pt-5 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.pr-5 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.pb-5 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.pl-5 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.py-5 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.px-5 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
    }
.p-6 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.pt-6 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.pr-6 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.pb-6 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.pl-6 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.py-6 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.px-6 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
    }
.p-7 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.pt-7 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.pr-7 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.pb-7 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.pl-7 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.py-7 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.px-7 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
    }
.p-8 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.pt-8 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.pr-8 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.pb-8 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.pl-8 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.py-8 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.px-8 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
    }
.p-9 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.pt-9 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.pr-9 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.pb-9 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.pl-9 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.py-9 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.px-9 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
    }
.p-10 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.pt-10 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.pr-10 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.pb-10 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.pl-10 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.py-10 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.px-10 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
    }
.p-11 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.pt-11 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.pr-11 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.pb-11 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.pl-11 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.py-11 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.px-11 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 11 - var(--css-utils-spacing-base, 10px));
    }
.p-12 {
      padding: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.pt-12 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.pr-12 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.pb-12 {
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.pl-12 {
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.py-12 {
      padding-top: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
      padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }
.px-12 {
      padding-right: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
      padding-left: calc(var(--css-utils-spacing-base, 10px) * 12 - var(--css-utils-spacing-base, 10px));
    }

/* Auto values */

.m-auto {
    margin: auto;
  }

.mt-auto {
    margin-top: auto;
  }

.mr-auto {
    margin-right: auto;
  }

.mb-auto {
    margin-bottom: auto;
  }

.ml-auto {
    margin-left: auto;
  }

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

.mx-auto {
    margin-right: auto;
    margin-left: auto;
  }

/* Repsonsive */
@media (--viewport-ms-min) {
    /* Zero and half values */
        .m-ms-0 {
          margin: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .mt-ms-0 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .mr-ms-0 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .mb-ms-0 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .ml-ms-0 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .my-ms-0 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .mx-ms-0 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
          margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }
        .p-ms-0 {
          padding: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .pt-ms-0 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .pr-ms-0 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .pb-ms-0 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .pl-ms-0 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .py-ms-0 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }

        .px-ms-0 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
          padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 0);
        }
        .m-ms-1 {
          margin: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .mt-ms-1 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .mr-ms-1 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .mb-ms-1 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .ml-ms-1 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .my-ms-1 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .mx-ms-1 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
          margin-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }
        .p-ms-1 {
          padding: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .pt-ms-1 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .pr-ms-1 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .pb-ms-1 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .pl-ms-1 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .py-ms-1 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

        .px-ms-1 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
          padding-left: calc(var(--css-utils-spacing-base, 10px) / 2 * 1);
        }

    /* The rest */
        .m-ms-2 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-2 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-2 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-2 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-2 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-2 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-2 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-2 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-2 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-2 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-2 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-2 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-2 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-2 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 2 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-3 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-3 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-3 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-3 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-3 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-3 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-3 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-3 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-3 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-3 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-3 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-3 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-3 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-3 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 3 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-4 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-4 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-4 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-4 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-4 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-4 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-4 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-4 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-4 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-4 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-4 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-4 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-4 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-4 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 4 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-5 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-5 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-5 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-5 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-5 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-5 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-5 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-5 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-5 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-5 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-5 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-5 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-5 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-5 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 5 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-6 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-6 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-6 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-6 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-6 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-6 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-6 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-6 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-6 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-6 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-6 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-6 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-6 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-6 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 6 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-7 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-7 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-7 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-7 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-7 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-7 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-7 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-7 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-7 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-7 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-7 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-7 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-7 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-7 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 7 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-8 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-8 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-8 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-8 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-8 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-8 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-8 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-8 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-8 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-8 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-8 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-8 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-8 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-8 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 8 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-9 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-9 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-9 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-9 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-9 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-9 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-9 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }
        .p-ms-9 {
          padding: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .pt-ms-9 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .pr-ms-9 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .pb-ms-9 {
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .pl-ms-9 {
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .py-ms-9 {
          padding-top: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
          padding-bottom: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }

        .px-ms-9 {
          padding-right: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
          padding-left: calc(var(--css-utils-spacing-base, 10px) * 9 - var(--css-utils-spacing-base, 10px));
        }
        .m-ms-10 {
          margin: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .mt-ms-10 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .mr-ms-10 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .mb-ms-10 {
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .ml-ms-10 {
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .my-ms-10 {
          margin-top: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
          margin-bottom: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
        }

        .mx-ms-10 {
          margin-right: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-base, 10px));
          margin-left: calc(var(--css-utils-spacing-base, 10px) * 10 - var(--css-utils-spacing-