@roadtrip/css/styles/utilities/_spacing.css

CSS framework for Roadtrip Design System

/*
 * Spacing utitlities

 * Include all margin and padding individual properties
 * for 0, 8px, 16px 24px spacing
 *
 * Index
 * - Margin
 * - Padding
 *
 */


/* MARGIN
 -------------------- */

 .m-0 {
  margin: 0;
}

.m-4 {
  margin: var(--road-spacing-02);
}

.m-8 {
  margin: var(--road-spacing-03);
}

.m-12 {
  margin: var(--road-spacing-04);
}

.m-16 {
  margin: var(--road-spacing-05);
}

.m-24 {
  margin: var(--road-spacing-06);
}

.m-auto {
  margin: auto;
}

/**
 * Margin horizontal
 */

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

.mx-4 {
  margin-right: var(--road-spacing-02);
  margin-left: var(--road-spacing-02);
}

.mx-8 {
  margin-right: var(--road-spacing-03);
  margin-left: var(--road-spacing-03);
}

.mx-12 {
  margin-right: var(--road-spacing-04);
  margin-left: var(--road-spacing-04);
}

.mx-16 {
  margin-right: var(--road-spacing-05);
  margin-left: var(--road-spacing-05);
}

.mx-24 {
  margin-right: var(--road-spacing-06);
  margin-left: var(--road-spacing-06);
}

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

/**
 * Margin vertical
 */

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

.my-4 {
  margin-top: var(--road-spacing-02);
  margin-bottom: var(--road-spacing-02);
}

.my-8 {
  margin-top: var(--road-spacing-03);
  margin-bottom: var(--road-spacing-03);
}

.my-12 {
  margin-top: var(--road-spacing-04);
  margin-bottom: var(--road-spacing-04);
}

.my-16 {
  margin-top: var(--road-spacing-05);
  margin-bottom: var(--road-spacing-05);
}

.my-24 {
  margin-top: var(--road-spacing-06);
  margin-bottom: var(--road-spacing-06);
}

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

/**
 * Margin top
 */

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

.mt-4 {
  margin-top: var(--road-spacing-02);
}

.mt-8 {
  margin-top: var(--road-spacing-03);
}

.mt-12 {
  margin-top: var(--road-spacing-04);
}

.mt-16 {
  margin-top: var(--road-spacing-05);
}

.mt-24 {
  margin-top: var(--road-spacing-06);
}

/**
 * Margin right
 */

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

.mr-4 {
  margin-right: var(--road-spacing-02);
}

.mr-8 {
  margin-right: var(--road-spacing-03);
}

.mr-12 {
  margin-right: var(--road-spacing-04);
}

.mr-16 {
  margin-right: var(--road-spacing-05);
}

.mr-24 {
  margin-right: var(--road-spacing-06);
}

/**
 * Margin bottom
 */

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

.mb-4 {
  margin-bottom: var(--road-spacing-02);
}

.mb-8 {
  margin-bottom: var(--road-spacing-03);
}

.mb-12 {
  margin-bottom: var(--road-spacing-04);
}

.mb-16 {
  margin-bottom: var(--road-spacing-05);
}

.mb-24 {
  margin-bottom: var(--road-spacing-06);
}

/**
 * Margin left
 */

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

.ml-4 {
  margin-left: var(--road-spacing-02);
}

.ml-8 {
  margin-left: var(--road-spacing-03);
}

.ml-12 {
  margin-left: var(--road-spacing-04);
}

.ml-16 {
  margin-left: var(--road-spacing-05);
}

.ml-24 {
  margin-left: var(--road-spacing-06);
}

/* PADDING
 -------------------- */

.p-0 {
  padding: 0;
}

.p-4 {
  padding: var(--road-spacing-02);
}

.p-8 {
  padding: var(--road-spacing-03);
}

.p-12 {
  padding: var(--road-spacing-04);
}

.p-16 {
  padding: var(--road-spacing-05);
}

.p-24 {
  padding: var(--road-spacing-06);
}

/**
 * Padding horizontal
 */

.px-0 {
  padding-right: 0;
  padding-left: 0;
}

.px-4 {
  padding-right: var(--road-spacing-02);
  padding-left: var(--road-spacing-02);
}

.px-8 {
  padding-right: var(--road-spacing-03);
  padding-left: var(--road-spacing-03);
}

.px-12 {
  padding-right: var(--road-spacing-04);
  padding-left: var(--road-spacing-04);
}

.px-16 {
  padding-right: var(--road-spacing-05);
  padding-left: var(--road-spacing-05);
}

.px-24 {
  padding-right: var(--road-spacing-06);
  padding-left: var(--road-spacing-06);
}

/**
 * Padding vertical
 */

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-4 {
  padding-top: var(--road-spacing-02);
  padding-bottom: var(--road-spacing-02);
}

.py-8 {
  padding-top: var(--road-spacing-03);
  padding-bottom: var(--road-spacing-03);
}

.py-12 {
  padding-top: var(--road-spacing-04);
  padding-bottom: var(--road-spacing-04);
}

.py-16 {
  padding-top: var(--road-spacing-05);
  padding-bottom: var(--road-spacing-05);
}

.py-24 {
  padding-top: var(--road-spacing-06);
  padding-bottom: var(--road-spacing-06);
}

/**
 * Padding top
 */

.pt-0 {
  padding-top: 0;
}

.pt-4 {
  padding-top: var(--road-spacing-02);
}

.pt-8 {
  padding-top: var(--road-spacing-03);
}

.pt-12 {
  padding-top: var(--road-spacing-04);
}

.pt-16 {
  padding-top: var(--road-spacing-05);
}

.pt-24 {
  padding-top: var(--road-spacing-06);
}

/**
 * Padding right
 */

.pr-0 {
  padding-right: 0;
}

.pr-4 {
  padding-right: var(--road-spacing-02);
}

.pr-8 {
  padding-right: var(--road-spacing-03);
}

.pr-12 {
  padding-right: var(--road-spacing-04);
}

.pr-16 {
  padding-right: var(--road-spacing-05);
}

.pr-24 {
  padding-right: var(--road-spacing-06);
}

/**
 * Padding bottom
 */

.pb-0 {
  padding-bottom: 0;
}

.pb-4 {
  padding-bottom: var(--road-spacing-02);
}

.pb-8 {
  padding-bottom: var(--road-spacing-03);
}

.pb-12 {
  padding-bottom: var(--road-spacing-04);
}

.pb-16 {
  padding-bottom: var(--road-spacing-05);
}

.pb-24 {
  padding-bottom: var(--road-spacing-06);
}

/**
 * Padding left
 */

.pl-0 {
  padding-left: 0;
}

.pl-4 {
  padding-left: var(--road-spacing-02);
}

.pl-8 {
  padding-left: var(--road-spacing-03);
}

.pl-12 {
  padding-left: var(--road-spacing-04);
}

.pl-16 {
  padding-left: var(--road-spacing-05);
}

.pl-24 {
  padding-left: var(--road-spacing-06);
}

/**
 * Gap
 */

.gap-0 {
  gap: 0;
}

.gap-4 {
  gap: var(--road-spacing-02);
}

.gap-8 {
  gap: var(--road-spacing-03);
}

.gap-12 {
  gap: var(--road-spacing-04);
}

.gap-16 {
  gap: var(--road-spacing-05);
}

.gap-24 {
  gap: var(--road-spacing-06);
}

@media (min-width: 576px) {

  .m-sm-0 {
    margin: 0;
  }

  .m-sm-4 {
    margin: var(--road-spacing-02);
  }

  .m-sm-8 {
    margin: var(--road-spacing-03);
  }

  .m-sm-12 {
    margin: var(--road-spacing-04);
  }

  .m-sm-16 {
    margin: var(--road-spacing-05);
  }

  .m-sm-24 {
    margin: var(--road-spacing-06);
  }

  .m-sm-auto {
    margin: auto;
  }

  .mt-sm-0 {
    margin-top: 0;
  }

  .mt-sm-4 {
    margin-top: var(--road-spacing-02);
  }

  .mt-sm-8 {
    margin-top: var(--road-spacing-03);
  }

  .mt-sm-12 {
    margin-top: var(--road-spacing-04);
  }

  .mt-sm-16 {
    margin-top: var(--road-spacing-05);
  }

  .mt-sm-24 {
    margin-top: var(--road-spacing-06);
  }

  .mr-sm-0 {
    margin-right: 0;
  }

  .mr-sm-4 {
    margin-right: var(--road-spacing-02);
  }

  .mr-sm-8 {
    margin-right: var(--road-spacing-03);
  }

  .mr-sm-12 {
    margin-right: var(--road-spacing-04);
  }

  .mr-sm-16 {
    margin-right: var(--road-spacing-05);
  }

  .mr-sm-24 {
    margin-right: var(--road-spacing-06);
  }

  .mb-sm-0 {
    margin-bottom: 0;
  }

  .mb-sm-4 {
    margin-bottom: var(--road-spacing-02);
  }

  .mb-sm-8 {
    margin-bottom: var(--road-spacing-03);
  }

  .mb-sm-12 {
    margin-bottom: var(--road-spacing-04);
  }

  .mb-sm-16 {
    margin-bottom: var(--road-spacing-05);
  }

  .mb-sm-24 {
    margin-bottom: var(--road-spacing-06);
  }

  .ml-sm-0 {
    margin-left: 0;
  }

  .ml-sm-4 {
    margin-left: var(--road-spacing-02);
  }

  .ml-sm-8 {
    margin-left: var(--road-spacing-03);
  }

  .ml-sm-12 {
    margin-left: var(--road-spacing-04);
  }

  .ml-sm-16 {
    margin-left: var(--road-spacing-05);
  }

  .ml-sm-24 {
    margin-left: var(--road-spacing-06);
  }

  .p-sm-0 {
    padding: 0;
  }

  .p-sm-4 {
    padding: var(--road-spacing-02);
  }

  .p-sm-8 {
    padding: var(--road-spacing-03);
  }

  .p-sm-12 {
    padding: var(--road-spacing-04);
  }

  .p-sm-16 {
    padding: var(--road-spacing-05);
  }

  .p-sm-24 {
    padding: var(--road-spacing-06);
  }

  .px-sm-0 {
    padding-right: 0;
    padding-left: 0;
  }

  .px-sm-4 {
    padding-right: var(--road-spacing-02);
    padding-left: var(--road-spacing-02);
  }

  .px-sm-8 {
    padding-right: var(--road-spacing-03);
    padding-left: var(--road-spacing-03);
  }

  .px-sm-12 {
    padding-right: var(--road-spacing-04);
    padding-left: var(--road-spacing-04);
  }

  .px-sm-16 {
    padding-right: var(--road-spacing-05);
    padding-left: var(--road-spacing-05);
  }

  .px-sm-24 {
    padding-right: var(--road-spacing-06);
    padding-left: var(--road-spacing-06);
  }

  .py-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-sm-4 {
    padding-top: var(--road-spacing-02);
    padding-bottom: var(--road-spacing-02);
  }

  .py-sm-8 {
    padding-top: var(--road-spacing-03);
    padding-bottom: var(--road-spacing-03);
  }

  .py-sm-12 {
    padding-top: var(--road-spacing-04);
    padding-bottom: var(--road-spacing-04);
  }

  .py-sm-16 {
    padding-top: var(--road-spacing-05);
    padding-bottom: var(--road-spacing-05);
  }

  .py-sm-24 {
    padding-top: var(--road-spacing-06);
    padding-bottom: var(--road-spacing-06);
  }

  .pt-sm-0 {
    padding-top: 0;
  }

  .pt-sm-4 {
    padding-top: var(--road-spacing-02);
  }

  .pt-sm-8 {
    padding-top: var(--road-spacing-03);
  }

  .pt-sm-12 {
    padding-top: var(--road-spacing-04);
  }

  .pt-sm-16 {
    padding-top: var(--road-spacing-05);
  }

  .pt-sm-24 {
    padding-top: var(--road-spacing-06);
  }

  .pr-sm-0 {
    padding-right: 0;
  }

  .pr-sm-4 {
    padding-right: var(--road-spacing-02);
  }

  .pr-sm-8 {
    padding-right: var(--road-spacing-03);
  }

  .pr-sm-12 {
    padding-right: var(--road-spacing-04);
  }

  .pr-sm-16 {
    padding-right: var(--road-spacing-05);
  }

  .pr-sm-24 {
    padding-right: var(--road-spacing-06);
  }

  .pb-sm-0 {
    padding-bottom: 0;
  }

  .pb-sm-4 {
    padding-bottom: var(--road-spacing-02);
  }

  .pb-sm-8 {
    padding-bottom: var(--road-spacing-03);
  }

  .pb-sm-12 {
    padding-bottom: var(--road-spacing-04);
  }

  .pb-sm-16 {
    padding-bottom: var(--road-spacing-05);
  }

  .pb-sm-24 {
    padding-bottom: var(--road-spacing-06);
  }

  .pl-sm-0 {
    padding-left: 0;
  }

  .pl-sm-4 {
    padding-left: var(--road-spacing-02);
  }

  .pl-sm-8 {
    padding-left: var(--road-spacing-03);
  }

  .pl-sm-12 {
    padding-left: var(--road-spacing-04);
  }

  .pl-sm-16 {
    padding-left: var(--road-spacing-05);
  }

  .pl-sm-24 {
    padding-left: var(--road-spacing-06);
  }

  .gap-sm-0 {
    gap: 0;
  }

  .gap-sm-4 {
    gap: var(--road-spacing-02);
  }

  .gap-sm-8 {
    gap: var(--road-spacing-03);
  }

  .gap-sm-12 {
    gap: var(--road-spacing-04);
  }

  .gap-sm-16 {
    gap: var(--road-spacing-05);
  }

  .gap-sm-24 {
    gap: var(--road-spacing-06);
  }

}

@media (min-width: 768px) {

  .m-md-0 {
    margin: 0;
  }

  .m-md-4 {
    margin: var(--road-spacing-02);
  }

  .m-md-8 {
    margin: var(--road-spacing-03);
  }

  .m-md-12 {
    margin: var(--road-spacing-04);
  }

  .m-md-16 {
    margin: var(--road-spacing-05);
  }

  .m-md-24 {
    margin: var(--road-spacing-06);
  }

  .m-md-auto {
    margin: auto;
  }

  .mt-md-0 {
    margin-top: 0;
  }

  .mt-md-4 {
    margin-top: var(--road-spacing-02);
  }

  .mt-md-8 {
    margin-top: var(--road-spacing-03);
  }

  .mt-md-12 {
    margin-top: var(--road-spacing-04);
  }

  .mt-md-16 {
    margin-top: var(--road-spacing-05);
  }

  .mt-md-24 {
    margin-top: var(--road-spacing-06);
  }

  .mr-md-0 {
    margin-right: 0;
  }

  .mr-md-4 {
    margin-right: var(--road-spacing-02);
  }

  .mr-md-8 {
    margin-right: var(--road-spacing-03);
  }

  .mr-md-12 {
    margin-right: var(--road-spacing-04);
  }

  .mr-md-16 {
    margin-right: var(--road-spacing-05);
  }

  .mr-md-24 {
    margin-right: var(--road-spacing-06);
  }

  .mb-md-0 {
    margin-bottom: 0;
  }

  .mb-md-4 {
    margin-bottom: var(--road-spacing-02);
  }

  .mb-md-8 {
    margin-bottom: var(--road-spacing-03);
  }

  .mb-md-12 {
    margin-bottom: var(--road-spacing-04);
  }

  .mb-md-16 {
    margin-bottom: var(--road-spacing-05);
  }

  .mb-md-24 {
    margin-bottom: var(--road-spacing-06);
  }

  .ml-md-0 {
    margin-left: 0;
  }

  .ml-md-4 {
    margin-left: var(--road-spacing-02);
  }

  .ml-md-8 {
    margin-left: var(--road-spacing-03);
  }

  .ml-md-12 {
    margin-left: var(--road-spacing-04);
  }

  .ml-md-16 {
    margin-left: var(--road-spacing-05);
  }

  .ml-md-24 {
    margin-left: var(--road-spacing-06);
  }

  .p-md-0 {
    padding: 0;
  }

  .p-md-4 {
    padding: var(--road-spacing-02);
  }

  .p-md-8 {
    padding: var(--road-spacing-03);
  }

  .p-md-12 {
    padding: var(--road-spacing-04);
  }

  .p-md-16 {
    padding: var(--road-spacing-05);
  }

  .p-md-24 {
    padding: var(--road-spacing-06);
  }

  .px-md-0 {
    padding-right: 0;
    padding-left: 0;
  }

  .px-md-4 {
    padding-right: var(--road-spacing-02);
    padding-left: var(--road-spacing-02);
  }

  .px-md-8 {
    padding-right: var(--road-spacing-03);
    padding-left: var(--road-spacing-03);
  }

  .px-md-12 {
    padding-right: var(--road-spacing-04);
    padding-left: var(--road-spacing-04);
  }

  .px-md-16 {
    padding-right: var(--road-spacing-05);
    padding-left: var(--road-spacing-05);
  }

  .px-md-24 {
    padding-right: var(--road-spacing-06);
    padding-left: var(--road-spacing-06);
  }

  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-md-4 {
    padding-top: var(--road-spacing-02);
    padding-bottom: var(--road-spacing-02);
  }

  .py-md-8 {
    padding-top: var(--road-spacing-03);
    padding-bottom: var(--road-spacing-03);
  }

  .py-md-12 {
    padding-top: var(--road-spacing-04);
    padding-bottom: var(--road-spacing-04);
  }

  .py-md-16 {
    padding-top: var(--road-spacing-05);
    padding-bottom: var(--road-spacing-05);
  }

  .py-md-24 {
    padding-top: var(--road-spacing-06);
    padding-bottom: var(--road-spacing-06);
  }

  .pt-md-0 {
    padding-top: 0;
  }

  .pt-md-4 {
    padding-top: var(--road-spacing-02);
  }

  .pt-md-8 {
    padding-top: var(--road-spacing-03);
  }

  .pt-md-12 {
    padding-top: var(--road-spacing-04);
  }

  .pt-md-16 {
    padding-top: var(--road-spacing-05);
  }

  .pt-md-24 {
    padding-top: var(--road-spacing-06);
  }

  .pr-md-0 {
    padding-right: 0;
  }

  .pr-md-4 {
    padding-right: var(--road-spacing-02);
  }

  .pr-md-8 {
    padding-right: var(--road-spacing-03);
  }

  .pr-md-12 {
    padding-right: var(--road-spacing-04);
  }

  .pr-md-16 {
    padding-right: var(--road-spacing-05);
  }

  .pr-md-24 {
    padding-right: var(--road-spacing-06);
  }

  .pb-md-0 {
    padding-bottom: 0;
  }

  .pb-md-4 {
    padding-bottom: var(--road-spacing-02);
  }

  .pb-md-8 {
    padding-bottom: var(--road-spacing-03);
  }

  .pb-md-12 {
    padding-bottom: var(--road-spacing-04);
  }

  .pb-md-16 {
    padding-bottom: var(--road-spacing-05);
  }

  .pb-md-24 {
    padding-bottom: var(--road-spacing-06);
  }

  .pl-md-0 {
    padding-left: 0;
  }

  .pl-md-4 {
    padding-left: var(--road-spacing-02);
  }

  .pl-md-8 {
    padding-left: var(--road-spacing-03);
  }

  .pl-md-12 {
    padding-left: var(--road-spacing-04);
  }

  .pl-md-16 {
    padding-left: var(--road-spacing-05);
  }

  .pl-md-24 {
    padding-left: var(--road-spacing-06);
  }

  .gap-md-0 {
    gap: 0;
  }

  .gap-md-4 {
    gap: var(--road-spacing-02);
  }

  .gap-md-8 {
    gap: var(--road-spacing-03);
  }

  .gap-md-12 {
    gap: var(--road-spacing-04);
  }

  .gap-md-16 {
    gap: var(--road-spacing-05);
  }

  .gap-md-24 {
    gap: var(--road-spacing-06);
  }

}

@media (min-width: 992px) {

  .m-lg-0 {
    margin: 0;
  }

  .m-lg-4 {
    margin: var(--road-spacing-02);
  }

  .m-lg-8 {
    margin: var(--road-spacing-03);
  }

  .m-lg-12 {
    margin: var(--road-spacing-04);
  }

  .m-lg-16 {
    margin: var(--road-spacing-05);
  }

  .m-lg-24 {
    margin: var(--road-spacing-06);
  }

  .m-lg-auto {
    margin: auto;
  }

  .mt-lg-0 {
    margin-top: 0;
  }

  .mt-lg-4 {
    margin-top: var(--road-spacing-02);
  }

  .mt-lg-8 {
    margin-top: var(--road-spacing-03);
  }

  .mt-lg-12 {
    margin-top: var(--road-spacing-04);
  }

  .mt-lg-16 {
    margin-top: var(--road-spacing-05);
  }

  .mt-lg-24 {
    margin-top: var(--road-spacing-06);
  }

  .mr-lg-0 {
    margin-right: 0;
  }

  .mr-lg-4 {
    margin-right: var(--road-spacing-02);
  }

  .mr-lg-8 {
    margin-right: var(--road-spacing-03);
  }

  .mr-lg-12 {
    margin-right: var(--road-spacing-04);
  }

  .mr-lg-16 {
    margin-right: var(--road-spacing-05);
  }

  .mr-lg-24 {
    margin-right: var(--road-spacing-06);
  }

  .mb-lg-0 {
    margin-bottom: 0;
  }

  .mb-lg-4 {
    margin-bottom: var(--road-spacing-02);
  }

  .mb-lg-8 {
    margin-bottom: var(--road-spacing-03);
  }

  .mb-lg-12 {
    margin-bottom: var(--road-spacing-04);
  }

  .mb-lg-16 {
    margin-bottom: var(--road-spacing-05);
  }

  .mb-lg-24 {
    margin-bottom: var(--road-spacing-06);
  }

  .ml-lg-0 {
    margin-left: 0;
  }

  .ml-lg-4 {
    margin-left: var(--road-spacing-02);
  }

  .ml-lg-8 {
    margin-left: var(--road-spacing-03);
  }

  .ml-lg-12 {
    margin-left: var(--road-spacing-04);
  }

  .ml-lg-16 {
    margin-left: var(--road-spacing-05);
  }

  .ml-lg-24 {
    margin-left: var(--road-spacing-06);
  }

  .p-lg-0 {
    padding: 0;
  }

  .p-lg-4 {
    padding: var(--road-spacing-02);
  }

  .p-lg-8 {
    padding: var(--road-spacing-03);
  }

  .p-lg-12 {
    padding: var(--road-spacing-04);
  }

  .p-lg-16 {
    padding: var(--road-spacing-05);
  }

  .p-lg-24 {
    padding: var(--road-spacing-06);
  }

  .px-lg-0 {
    padding-right: 0;
    padding-left: 0;
  }

  .px-lg-4 {
    padding-right: var(--road-spacing-02);
    padding-left: var(--road-spacing-02);
  }

  .px-lg-8 {
    padding-right: var(--road-spacing-03);
    padding-left: var(--road-spacing-03);
  }

  .px-lg-12 {
    padding-right: var(--road-spacing-04);
    padding-left: var(--road-spacing-04);
  }

  .px-lg-16 {
    padding-right: var(--road-spacing-05);
    padding-left: var(--road-spacing-05);
  }

  .px-lg-24 {
    padding-right: var(--road-spacing-06);
    padding-left: var(--road-spacing-06);
  }

  .py-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-lg-4 {
    padding-top: var(--road-spacing-02);
    padding-bottom: var(--road-spacing-02);
  }

  .py-lg-8 {
    padding-top: var(--road-spacing-03);
    padding-bottom: var(--road-spacing-03);
  }

  .py-lg-12 {
    padding-top: var(--road-spacing-04);
    padding-bottom: var(--road-spacing-04);
  }

  .py-lg-16 {
    padding-top: var(--road-spacing-05);
    padding-bottom: var(--road-spacing-05);
  }

  .py-lg-24 {
    padding-top: var(--road-spacing-06);
    padding-bottom: var(--road-spacing-06);
  }

  .pt-lg-0 {
    padding-top: 0;
  }

  .pt-lg-4 {
    padding-top: var(--road-spacing-02);
  }

  .pt-lg-8 {
    padding-top: var(--road-spacing-03);
  }

  .pt-lg-12 {
    padding-top: var(--road-spacing-04);
  }

  .pt-lg-16 {
    padding-top: var(--road-spacing-05);
  }

  .pt-lg-24 {
    padding-top: var(--road-spacing-06);
  }

  .pr-lg-0 {
    padding-right: 0;
  }

  .pr-lg-4 {
    padding-right: var(--road-spacing-02);
  }

  .pr-lg-8 {
    padding-right: var(--road-spacing-03);
  }

  .pr-lg-12 {
    padding-right: var(--road-spacing-04);
  }

  .pr-lg-16 {
    padding-right: var(--road-spacing-05);
  }

  .pr-lg-24 {
    padding-right: var(--road-spacing-06);
  }

  .pb-lg-0 {
    padding-bottom: 0;
  }

  .pb-lg-4 {
    padding-bottom: var(--road-spacing-02);
  }

  .pb-lg-8 {
    padding-bottom: var(--road-spacing-03);
  }

  .pb-lg-12 {
    padding-bottom: var(--road-spacing-04);
  }

  .pb-lg-16 {
    padding-bottom: var(--road-spacing-05);
  }

  .pb-lg-24 {
    padding-bottom: var(--road-spacing-06);
  }

  .pl-lg-0 {
    padding-left: 0;
  }

  .pl-lg-4 {
    padding-left: var(--road-spacing-02);
  }

  .pl-lg-8 {
    padding-left: var(--road-spacing-03);
  }

  .pl-lg-12 {
    padding-left: var(--road-spacing-04);
  }

  .pl-lg-16 {
    padding-left: var(--road-spacing-05);
  }

  .pl-lg-24 {
    padding-left: var(--road-spacing-06);
  }

  .gap-lg-0 {
    gap: 0;
  }

  .gap-lg-4 {
    gap: var(--road-spacing-02);
  }

  .gap-lg-8 {
    gap: var(--road-spacing-03);
  }

  .gap-lg-12 {
    gap: var(--road-spacing-04);
  }

  .gap-lg-16 {
    gap: var(--road-spacing-05);
  }

  .gap-lg-24 {
    gap: var(--road-spacing-06);
  }

}

@media (min-width: 1200px) {

  .m-xl-0 {
    margin: 0;
  }

  .m-xl-4 {
    margin: var(--road-spacing-02);
  }

  .m-xl-8 {
    margin: var(--road-spacing-03);
  }

  .m-xl-12 {
    margin: var(--road-spacing-04);
  }

  .m-xl-16 {
    margin: var(--road-spacing-05);
  }

  .m-xl-24 {
    margin: var(--road-spacing-06);
  }

  .m-xl-auto {
    margin: auto;
  }

  .mt-xl-0 {
    margin-top: 0;
  }

  .mt-xl-4 {
    margin-top: var(--road-spacing-02);
  }

  .mt-xl-8 {
    margin-top: var(--road-spacing-03);
  }

  .mt-xl-12 {
    margin-top: var(--road-spacing-04);
  }

  .mt-xl-16 {
    margin-top: var(--road-spacing-05);
  }

  .mt-xl-24 {
    margin-top: var(--road-spacing-06);
  }

  .mr-xl-0 {
    margin-right: 0;
  }

  .mr-xl-4 {
    margin-right: var(--road-spacing-02);
  }

  .mr-xl-8 {
    margin-right: var(--road-spacing-03);
  }

  .mr-xl-12 {
    margin-right: var(--road-spacing-04);
  }

  .mr-xl-16 {
    margin-right: var(--road-spacing-05);
  }

  .mr-xl-24 {
    margin-right: var(--road-spacing-06);
  }

  .mb-xl-0 {
    margin-bottom: 0;
  }

  .mb-xl-4 {
    margin-bottom: var(--road-spacing-02);
  }

  .mb-xl-8 {
    margin-bottom: var(--road-spacing-03);
  }

  .mb-xl-12 {
    margin-bottom: var(--road-spacing-04);
  }

  .mb-xl-16 {
    margin-bottom: var(--road-spacing-05);
  }

  .mb-xl-24 {
    margin-bottom: var(--road-spacing-06);
  }

  .ml-xl-0 {
    margin-left: 0;
  }

  .ml-xl-4 {
    margin-left: var(--road-spacing-02);
  }

  .ml-xl-8 {
    margin-left: var(--road-spacing-03);
  }

  .ml-xl-12 {
    margin-left: var(--road-spacing-04);
  }

  .ml-xl-16 {
    margin-left: var(--road-spacing-05);
  }

  .ml-xl-24 {
    margin-left: var(--road-spacing-06);
  }

  .p-xl-0 {
    padding: 0;
  }

  .p-xl-4 {
    padding: var(--road-spacing-02);
  }

  .p-xl-8 {
    padding: var(--road-spacing-03);
  }

  .p-xl-12 {
    padding: var(--road-spacing-04);
  }

  .p-xl-16 {
    padding: var(--road-spacing-05);
  }

  .p-xl-24 {
    padding: var(--road-spacing-06);
  }

  .px-xl-0 {
    padding-right: 0;
    padding-left: 0;
  }

  .px-xl-4 {
    padding-right: var(--road-spacing-02);
    padding-left: var(--road-spacing-02);
  }

  .px-xl-8 {
    padding-right: var(--road-spacing-03);
    padding-left: var(--road-spacing-03);
  }

  .px-xl-12 {
    padding-right: var(--road-spacing-04);
    padding-left: var(--road-spacing-04);
  }

  .px-xl-16 {
    padding-right: var(--road-spacing-05);
    padding-left: var(--road-spacing-05);
  }

  .px-xl-24 {
    padding-right: var(--road-spacing-06);
    padding-left: var(--road-spacing-06);
  }

  .py-xl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-xl-4 {
    padding-top: var(--road-spacing-02);
    padding-bottom: var(--road-spacing-02);
  }

  .py-xl-8 {
    padding-top: var(--road-spacing-03);
    padding-bottom: var(--road-spacing-03);
  }

  .py-xl-12 {
    padding-top: var(--road-spacing-04);
    padding-bottom: var(--road-spacing-04);
  }

  .py-xl-16 {
    padding-top: var(--road-spacing-05);
    padding-bottom: var(--road-spacing-05);
  }

  .py-xl-24 {
    padding-top: var(--road-spacing-06);
    padding-bottom: var(--road-spacing-06);
  }

  .pt-xl-0 {
    padding-top: 0;
  }

  .pt-xl-4 {
    padding-top: var(--road-spacing-02);
  }

  .pt-xl-8 {
    padding-top: var(--road-spacing-03);
  }

  .pt-xl-12 {
    padding-top: var(--road-spacing-04);
  }

  .pt-xl-16 {
    padding-top: var(--road-spacing-05);
  }

  .pt-xl-24 {
    padding-top: var(--road-spacing-06);
  }

  .pr-xl-0 {
    padding-right: 0;
  }

  .pr-xl-4 {
    padding-right: var(--road-spacing-02);
  }

  .pr-xl-8 {
    padding-right: var(--road-spacing-03);
  }

  .pr-xl-12 {
    padding-right: var(--road-spacing-04);
  }

  .pr-xl-16 {
    padding-right: var(--road-spacing-05);
  }

  .pr-xl-24 {
    padding-right: var(--road-spacing-06);
  }

  .pb-xl-0 {
    padding-bottom: 0;
  }

  .pb-xl-4 {
    padding-bottom: var(--road-spacing-02);
  }

  .pb-xl-8 {
    padding-bottom: var(--road-spacing-03);
  }

  .pb-xl-12 {
    padding-bottom: var(--road-spacing-04);
  }

  .pb-xl-16 {
    padding-bottom: var(--road-spacing-05);
  }

  .pb-xl-24 {
    padding-bottom: var(--road-spacing-06);
  }

  .pl-xl-0 {
    padding-left: 0;
  }

  .pl-xl-4 {
    padding-left: var(--road-spacing-02);
  }

  .pl-xl-8 {
    padding-left: var(--road-spacing-03);
  }

  .pl-xl-12 {
    padding-left: var(--road-spacing-04);
  }

  .pl-xl-16 {
    padding-left: var(--road-spacing-05);
  }

  .pl-xl-24 {
    padding-left: var(--road-spacing-06);
  }

  .gap-xl-0 {
    gap: 0;
  }

  .gap-xl-4 {
    gap: var(--road-spacing-02);
  }

  .gap-xl-8 {
    gap: var(--road-spacing-03);
  }

  .gap-xl-12 {
    gap: var(--road-spacing-04);
  }

  .gap-xl-16 {
    gap: var(--road-spacing-05);
  }

  .gap-xl-24 {
    gap: var(--road-spacing-06);
  }

}