/* =========================
   VARIABLES
========================= */
:root {
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  --grid-columns: 12;
  --grid-gutter-x: 24px;
  --grid-gutter-y: 0px;

  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 2.5rem;   /* 40px */
  --space-9: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
}

/* =========================
   CONTAINER
========================= */
.container,
.container-fluid {
  width: 100%;
  padding-left: calc(var(--grid-gutter-x) / 2);
  padding-right: calc(var(--grid-gutter-x) / 2);
  margin-left: auto;
  margin-right: auto;
}

.container {
  max-width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 992px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--container-xxl);
  }
}

/* =========================
   ROW
========================= */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gutter-x) / -2);
  margin-right: calc(var(--grid-gutter-x) / -2);
  margin-top: calc(var(--grid-gutter-y) * -1);
}

.row > * {
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--grid-gutter-x) / 2);
  padding-right: calc(var(--grid-gutter-x) / 2);
  margin-top: var(--grid-gutter-y);
}

/* =========================
   BASE COL
========================= */
.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* =========================
   12 COLUMN SYSTEM
========================= */
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* =========================
   OFFSETS
========================= */
.offset-1  { margin-left: 8.333333%; }
.offset-2  { margin-left: 16.666667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.333333%; }
.offset-5  { margin-left: 41.666667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.333333%; }
.offset-8  { margin-left: 66.666667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }
.offset-0  { margin-left: 0; }

/* =========================
   RESPONSIVE BREAKPOINTS
   sm ≥576
   md ≥768
   lg ≥992
   xl ≥1200
   xxl ≥1400
========================= */

/* sm */
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }

  .col-sm-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3  { flex: 0 0 auto; width: 25%; }
  .col-sm-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6  { flex: 0 0 auto; width: 50%; }
  .col-sm-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9  { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }

  .offset-sm-0  { margin-left: 0; }
  .offset-sm-1  { margin-left: 8.333333%; }
  .offset-sm-2  { margin-left: 16.666667%; }
  .offset-sm-3  { margin-left: 25%; }
  .offset-sm-4  { margin-left: 33.333333%; }
  .offset-sm-5  { margin-left: 41.666667%; }
  .offset-sm-6  { margin-left: 50%; }
  .offset-sm-7  { margin-left: 58.333333%; }
  .offset-sm-8  { margin-left: 66.666667%; }
  .offset-sm-9  { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.333333%; }
  .offset-sm-11 { margin-left: 91.666667%; }
}

/* md */
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }

  .col-md-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }

  .offset-md-0  { margin-left: 0; }
  .offset-md-1  { margin-left: 8.333333%; }
  .offset-md-2  { margin-left: 16.666667%; }
  .offset-md-3  { margin-left: 25%; }
  .offset-md-4  { margin-left: 33.333333%; }
  .offset-md-5  { margin-left: 41.666667%; }
  .offset-md-6  { margin-left: 50%; }
  .offset-md-7  { margin-left: 58.333333%; }
  .offset-md-8  { margin-left: 66.666667%; }
  .offset-md-9  { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.333333%; }
  .offset-md-11 { margin-left: 91.666667%; }
}

/* lg */
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }

  .col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }

  .offset-lg-0  { margin-left: 0; }
  .offset-lg-1  { margin-left: 8.333333%; }
  .offset-lg-2  { margin-left: 16.666667%; }
  .offset-lg-3  { margin-left: 25%; }
  .offset-lg-4  { margin-left: 33.333333%; }
  .offset-lg-5  { margin-left: 41.666667%; }
  .offset-lg-6  { margin-left: 50%; }
  .offset-lg-7  { margin-left: 58.333333%; }
  .offset-lg-8  { margin-left: 66.666667%; }
  .offset-lg-9  { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.333333%; }
  .offset-lg-11 { margin-left: 91.666667%; }
}

/* xl */
@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }

  .col-xl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-xl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }

  .offset-xl-0  { margin-left: 0; }
  .offset-xl-1  { margin-left: 8.333333%; }
  .offset-xl-2  { margin-left: 16.666667%; }
  .offset-xl-3  { margin-left: 25%; }
  .offset-xl-4  { margin-left: 33.333333%; }
  .offset-xl-5  { margin-left: 41.666667%; }
  .offset-xl-6  { margin-left: 50%; }
  .offset-xl-7  { margin-left: 58.333333%; }
  .offset-xl-8  { margin-left: 66.666667%; }
  .offset-xl-9  { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.333333%; }
  .offset-xl-11 { margin-left: 91.666667%; }
}

/* xxl */
@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }

  .col-xxl-1  { flex: 0 0 auto; width: 8.333333%; }
  .col-xxl-2  { flex: 0 0 auto; width: 16.666667%; }
  .col-xxl-3  { flex: 0 0 auto; width: 25%; }
  .col-xxl-4  { flex: 0 0 auto; width: 33.333333%; }
  .col-xxl-5  { flex: 0 0 auto; width: 41.666667%; }
  .col-xxl-6  { flex: 0 0 auto; width: 50%; }
  .col-xxl-7  { flex: 0 0 auto; width: 58.333333%; }
  .col-xxl-8  { flex: 0 0 auto; width: 66.666667%; }
  .col-xxl-9  { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }

  .offset-xxl-0  { margin-left: 0; }
  .offset-xxl-1  { margin-left: 8.333333%; }
  .offset-xxl-2  { margin-left: 16.666667%; }
  .offset-xxl-3  { margin-left: 25%; }
  .offset-xxl-4  { margin-left: 33.333333%; }
  .offset-xxl-5  { margin-left: 41.666667%; }
  .offset-xxl-6  { margin-left: 50%; }
  .offset-xxl-7  { margin-left: 58.333333%; }
  .offset-xxl-8  { margin-left: 66.666667%; }
  .offset-xxl-9  { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.333333%; }
  .offset-xxl-11 { margin-left: 91.666667%; }
}

/* =========================
   GUTTER UTILITIES
========================= */
.g-0  { --grid-gutter-x: var(--space-0);  --grid-gutter-y: var(--space-0); }
.g-1  { --grid-gutter-x: var(--space-1);  --grid-gutter-y: var(--space-1); }
.g-2  { --grid-gutter-x: var(--space-2);  --grid-gutter-y: var(--space-2); }
.g-3  { --grid-gutter-x: var(--space-3);  --grid-gutter-y: var(--space-3); }
.g-4  { --grid-gutter-x: var(--space-4);  --grid-gutter-y: var(--space-4); }
.g-5  { --grid-gutter-x: var(--space-5);  --grid-gutter-y: var(--space-5); }
.g-6  { --grid-gutter-x: var(--space-6);  --grid-gutter-y: var(--space-6); }
.g-7  { --grid-gutter-x: var(--space-7);  --grid-gutter-y: var(--space-7); }
.g-8  { --grid-gutter-x: var(--space-8);  --grid-gutter-y: var(--space-8); }

.gx-0 { --grid-gutter-x: var(--space-0); }
.gx-1 { --grid-gutter-x: var(--space-1); }
.gx-2 { --grid-gutter-x: var(--space-2); }
.gx-3 { --grid-gutter-x: var(--space-3); }
.gx-4 { --grid-gutter-x: var(--space-4); }
.gx-5 { --grid-gutter-x: var(--space-5); }
.gx-6 { --grid-gutter-x: var(--space-6); }
.gx-7 { --grid-gutter-x: var(--space-7); }
.gx-8 { --grid-gutter-x: var(--space-8); }

.gy-0 { --grid-gutter-y: var(--space-0); }
.gy-1 { --grid-gutter-y: var(--space-1); }
.gy-2 { --grid-gutter-y: var(--space-2); }
.gy-3 { --grid-gutter-y: var(--space-3); }
.gy-4 { --grid-gutter-y: var(--space-4); }
.gy-5 { --grid-gutter-y: var(--space-5); }
.gy-6 { --grid-gutter-y: var(--space-6); }
.gy-7 { --grid-gutter-y: var(--space-7); }
.gy-8 { --grid-gutter-y: var(--space-8); }

/* =========================
   SPACING UTILITIES
========================= */

/* margin all */
.m-0  { margin: var(--space-0) !important; }
.m-1  { margin: var(--space-1) !important; }
.m-2  { margin: var(--space-2) !important; }
.m-3  { margin: var(--space-3) !important; }
.m-4  { margin: var(--space-4) !important; }
.m-5  { margin: var(--space-5) !important; }
.m-6  { margin: var(--space-6) !important; }
.m-7  { margin: var(--space-7) !important; }
.m-8  { margin: var(--space-8) !important; }
.m-9  { margin: var(--space-9) !important; }
.m-10 { margin: var(--space-10) !important; }

/* mt */
.mt-0  { margin-top: var(--space-0) !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-5  { margin-top: var(--space-5) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-7  { margin-top: var(--space-7) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-9  { margin-top: var(--space-9) !important; }
.mt-10 { margin-top: var(--space-10) !important; }

/* mb */
.mb-0  { margin-bottom: var(--space-0) !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-7  { margin-bottom: var(--space-7) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-9  { margin-bottom: var(--space-9) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }

/* ms */
.ms-0  { margin-left: var(--space-0) !important; }
.ms-1  { margin-left: var(--space-1) !important; }
.ms-2  { margin-left: var(--space-2) !important; }
.ms-3  { margin-left: var(--space-3) !important; }
.ms-4  { margin-left: var(--space-4) !important; }
.ms-5  { margin-left: var(--space-5) !important; }
.ms-6  { margin-left: var(--space-6) !important; }
.ms-7  { margin-left: var(--space-7) !important; }
.ms-8  { margin-left: var(--space-8) !important; }
.ms-9  { margin-left: var(--space-9) !important; }
.ms-10 { margin-left: var(--space-10) !important; }

/* me */
.me-0  { margin-right: var(--space-0) !important; }
.me-1  { margin-right: var(--space-1) !important; }
.me-2  { margin-right: var(--space-2) !important; }
.me-3  { margin-right: var(--space-3) !important; }
.me-4  { margin-right: var(--space-4) !important; }
.me-5  { margin-right: var(--space-5) !important; }
.me-6  { margin-right: var(--space-6) !important; }
.me-7  { margin-right: var(--space-7) !important; }
.me-8  { margin-right: var(--space-8) !important; }
.me-9  { margin-right: var(--space-9) !important; }
.me-10 { margin-right: var(--space-10) !important; }

/* mx */
.mx-0  { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-1  { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2  { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3  { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4  { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5  { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6  { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-7  { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
.mx-8  { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-9  { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }

/* my */
.my-0  { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1  { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2  { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3  { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4  { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5  { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6  { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-7  { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
.my-8  { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-9  { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }

/* padding all */
.p-0  { padding: var(--space-0) !important; }
.p-1  { padding: var(--space-1) !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-7  { padding: var(--space-7) !important; }
.p-8  { padding: var(--space-8) !important; }
.p-9  { padding: var(--space-9) !important; }
.p-10 { padding: var(--space-10) !important; }

/* pt */
.pt-0  { padding-top: var(--space-0) !important; }
.pt-1  { padding-top: var(--space-1) !important; }
.pt-2  { padding-top: var(--space-2) !important; }
.pt-3  { padding-top: var(--space-3) !important; }
.pt-4  { padding-top: var(--space-4) !important; }
.pt-5  { padding-top: var(--space-5) !important; }
.pt-6  { padding-top: var(--space-6) !important; }
.pt-7  { padding-top: var(--space-7) !important; }
.pt-8  { padding-top: var(--space-8) !important; }
.pt-9  { padding-top: var(--space-9) !important; }
.pt-10 { padding-top: var(--space-10) !important; }

/* pb */
.pb-0  { padding-bottom: var(--space-0) !important; }
.pb-1  { padding-bottom: var(--space-1) !important; }
.pb-2  { padding-bottom: var(--space-2) !important; }
.pb-3  { padding-bottom: var(--space-3) !important; }
.pb-4  { padding-bottom: var(--space-4) !important; }
.pb-5  { padding-bottom: var(--space-5) !important; }
.pb-6  { padding-bottom: var(--space-6) !important; }
.pb-7  { padding-bottom: var(--space-7) !important; }
.pb-8  { padding-bottom: var(--space-8) !important; }
.pb-9  { padding-bottom: var(--space-9) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }

/* ps */
.ps-0  { padding-left: var(--space-0) !important; }
.ps-1  { padding-left: var(--space-1) !important; }
.ps-2  { padding-left: var(--space-2) !important; }
.ps-3  { padding-left: var(--space-3) !important; }
.ps-4  { padding-left: var(--space-4) !important; }
.ps-5  { padding-left: var(--space-5) !important; }
.ps-6  { padding-left: var(--space-6) !important; }
.ps-7  { padding-left: var(--space-7) !important; }
.ps-8  { padding-left: var(--space-8) !important; }
.ps-9  { padding-left: var(--space-9) !important; }
.ps-10 { padding-left: var(--space-10) !important; }

/* pe */
.pe-0  { padding-right: var(--space-0) !important; }
.pe-1  { padding-right: var(--space-1) !important; }
.pe-2  { padding-right: var(--space-2) !important; }
.pe-3  { padding-right: var(--space-3) !important; }
.pe-4  { padding-right: var(--space-4) !important; }
.pe-5  { padding-right: var(--space-5) !important; }
.pe-6  { padding-right: var(--space-6) !important; }
.pe-7  { padding-right: var(--space-7) !important; }
.pe-8  { padding-right: var(--space-8) !important; }
.pe-9  { padding-right: var(--space-9) !important; }
.pe-10 { padding-right: var(--space-10) !important; }

/* px */
.px-0  { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1  { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2  { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3  { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4  { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5  { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6  { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-7  { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
.px-8  { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-9  { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }

/* py */
.py-0  { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1  { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2  { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3  { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4  { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5  { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6  { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-7  { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
.py-8  { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-9  { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }

/* auto margins */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ms-auto {
  margin-left: auto !important;
}

.me-auto {
  margin-right: auto !important;
}