@layer utilities {
  /* Margin */
  .m0  { margin: 0; }
  .mt0 { margin-top: 0; }
  .mr0 { margin-right: 0; }
  .mb0 { margin-bottom: 0; }
  .ml0 { margin-left: 0; }
  .mx0 { margin-left: 0; margin-right: 0; }
  .my0 { margin-top: 0; margin-bottom: 0; }
  .m1  { margin: var(--space-1); }
  .mt1 { margin-top: var(--space-1); }
  .mr1 { margin-right: var(--space-1); }
  .mb1 { margin-bottom: var(--space-1); }
  .ml1 { margin-left: var(--space-1); }
  .mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
  .my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
  .m2  { margin: var(--space-2); }
  .mt2 { margin-top: var(--space-2); }
  .mr2 { margin-right: var(--space-2); }
  .mb2 { margin-bottom: var(--space-2); }
  .ml2 { margin-left: var(--space-2); }
  .mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
  .my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .m3  { margin: var(--space-3); }
  .mt3 { margin-top: var(--space-3); }
  .mr3 { margin-right: var(--space-3); }
  .mb3 { margin-bottom: var(--space-3); }
  .ml3 { margin-left: var(--space-3); }
  .mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
  .my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
  .m4  { margin: var(--space-4); }
  .mt4 { margin-top: var(--space-4); }
  .mr4 { margin-right: var(--space-4); }
  .mb4 { margin-bottom: var(--space-4); }
  .ml4 { margin-left: var(--space-4); }
  .mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
  .my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
  .mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
  .mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
  .mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
  .mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .mx-auto { margin-left: auto; margin-right: auto; }

  /* Padding */
  .p0  { padding: 0; }
  .pt0 { padding-top: 0; }
  .pr0 { padding-right: 0; }
  .pb0 { padding-bottom: 0; }
  .pl0 { padding-left: 0; }
  .px0 { padding-left: 0; padding-right: 0; }
  .py0 { padding-top: 0; padding-bottom: 0; }
  .p1  { padding: var(--space-1); }
  .pt1 { padding-top: var(--space-1); }
  .pr1 { padding-right: var(--space-1); }
  .pb1 { padding-bottom: var(--space-1); }
  .pl1 { padding-left: var(--space-1); }
  .px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
  .py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .p2  { padding: var(--space-2); }
  .pt2 { padding-top: var(--space-2); }
  .pr2 { padding-right: var(--space-2); }
  .pb2 { padding-bottom: var(--space-2); }
  .pl2 { padding-left: var(--space-2); }
  .px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
  .py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .p3  { padding: var(--space-3); }
  .pt3 { padding-top: var(--space-3); }
  .pr3 { padding-right: var(--space-3); }
  .pb3 { padding-bottom: var(--space-3); }
  .pl3 { padding-left: var(--space-3); }
  .px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
  .py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .p4  { padding: var(--space-4); }
  .pt4 { padding-top: var(--space-4); }
  .pr4 { padding-right: var(--space-4); }
  .pb4 { padding-bottom: var(--space-4); }
  .pl4 { padding-left: var(--space-4); }
  .px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

  @media (min-width: 540px) {
    /* Small Margin */
    .sm-m0  { margin: 0; }
    .sm-mt0 { margin-top: 0; }
    .sm-mr0 { margin-right: 0; }
    .sm-mb0 { margin-bottom: 0; }
    .sm-ml0 { margin-left: 0; }
    .sm-mx0 { margin-left: 0; margin-right: 0; }
    .sm-my0 { margin-top: 0; margin-bottom: 0; }
    .sm-m1  { margin: var(--space-1); }
    .sm-mt1 { margin-top: var(--space-1); }
    .sm-mr1 { margin-right: var(--space-1); }
    .sm-mb1 { margin-bottom: var(--space-1); }
    .sm-ml1 { margin-left: var(--space-1); }
    .sm-mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
    .sm-my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .sm-m2  { margin: var(--space-2); }
    .sm-mt2 { margin-top: var(--space-2); }
    .sm-mr2 { margin-right: var(--space-2); }
    .sm-mb2 { margin-bottom: var(--space-2); }
    .sm-ml2 { margin-left: var(--space-2); }
    .sm-mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
    .sm-my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .sm-m3  { margin: var(--space-3); }
    .sm-mt3 { margin-top: var(--space-3); }
    .sm-mr3 { margin-right: var(--space-3); }
    .sm-mb3 { margin-bottom: var(--space-3); }
    .sm-ml3 { margin-left: var(--space-3); }
    .sm-mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
    .sm-my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .sm-m4  { margin: var(--space-4); }
    .sm-mt4 { margin-top: var(--space-4); }
    .sm-mr4 { margin-right: var(--space-4); }
    .sm-mb4 { margin-bottom: var(--space-4); }
    .sm-ml4 { margin-left: var(--space-4); }
    .sm-mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
    .sm-my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .sm-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
    .sm-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
    .sm-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
    .sm-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }
    .sm-ml-auto { margin-left: auto; }
    .sm-mr-auto { margin-right: auto; }
    .sm-mx-auto { margin-left: auto; margin-right: auto; }

    /* Small Padding */
    .sm-p0  { padding: 0; }
    .sm-pt0 { padding-top: 0; }
    .sm-pr0 { padding-right: 0; }
    .sm-pb0 { padding-bottom: 0; }
    .sm-pl0 { padding-left: 0; }
    .sm-px0 { padding-left: 0; padding-right: 0; }
    .sm-py0 { padding-top: 0; padding-bottom: 0; }
    .sm-p1  { padding: var(--space-1); }
    .sm-pt1 { padding-top: var(--space-1); }
    .sm-pr1 { padding-right: var(--space-1); }
    .sm-pb1 { padding-bottom: var(--space-1); }
    .sm-pl1 { padding-left: var(--space-1); }
    .sm-px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
    .sm-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .sm-p2  { padding: var(--space-2); }
    .sm-pt2 { padding-top: var(--space-2); }
    .sm-pr2 { padding-right: var(--space-2); }
    .sm-pb2 { padding-bottom: var(--space-2); }
    .sm-pl2 { padding-left: var(--space-2); }
    .sm-px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
    .sm-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .sm-p3  { padding: var(--space-3); }
    .sm-pt3 { padding-top: var(--space-3); }
    .sm-pr3 { padding-right: var(--space-3); }
    .sm-pb3 { padding-bottom: var(--space-3); }
    .sm-pl3 { padding-left: var(--space-3); }
    .sm-px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
    .sm-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .sm-p4  { padding: var(--space-4); }
    .sm-pt4 { padding-top: var(--space-4); }
    .sm-pr4 { padding-right: var(--space-4); }
    .sm-pb4 { padding-bottom: var(--space-4); }
    .sm-pl4 { padding-left: var(--space-4); }
    .sm-px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
    .sm-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  }

  @media (min-width: 768px) {
    /* Medium Margin */
    .md-m0  { margin: 0; }
    .md-mt0 { margin-top: 0; }
    .md-mr0 { margin-right: 0; }
    .md-mb0 { margin-bottom: 0; }
    .md-ml0 { margin-left: 0; }
    .md-mx0 { margin-left: 0; margin-right: 0; }
    .md-my0 { margin-top: 0; margin-bottom: 0; }
    .md-m1  { margin: var(--space-1); }
    .md-mt1 { margin-top: var(--space-1); }
    .md-mr1 { margin-right: var(--space-1); }
    .md-mb1 { margin-bottom: var(--space-1); }
    .md-ml1 { margin-left: var(--space-1); }
    .md-mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
    .md-my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .md-m2  { margin: var(--space-2); }
    .md-mt2 { margin-top: var(--space-2); }
    .md-mr2 { margin-right: var(--space-2); }
    .md-mb2 { margin-bottom: var(--space-2); }
    .md-ml2 { margin-left: var(--space-2); }
    .md-mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
    .md-my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .md-m3  { margin: var(--space-3); }
    .md-mt3 { margin-top: var(--space-3); }
    .md-mr3 { margin-right: var(--space-3); }
    .md-mb3 { margin-bottom: var(--space-3); }
    .md-ml3 { margin-left: var(--space-3); }
    .md-mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
    .md-my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .md-m4  { margin: var(--space-4); }
    .md-mt4 { margin-top: var(--space-4); }
    .md-mr4 { margin-right: var(--space-4); }
    .md-mb4 { margin-bottom: var(--space-4); }
    .md-ml4 { margin-left: var(--space-4); }
    .md-mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
    .md-my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .md-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
    .md-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
    .md-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
    .md-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }
    .md-ml-auto { margin-left: auto; }
    .md-mr-auto { margin-right: auto; }
    .md-mx-auto { margin-left: auto; margin-right: auto; }

    /* Medium Padding */
    .md-p0  { padding: 0; }
    .md-pt0 { padding-top: 0; }
    .md-pr0 { padding-right: 0; }
    .md-pb0 { padding-bottom: 0; }
    .md-pl0 { padding-left: 0; }
    .md-px0 { padding-left: 0; padding-right: 0; }
    .md-py0 { padding-top: 0; padding-bottom: 0; }
    .md-p1  { padding: var(--space-1); }
    .md-pt1 { padding-top: var(--space-1); }
    .md-pr1 { padding-right: var(--space-1); }
    .md-pb1 { padding-bottom: var(--space-1); }
    .md-pl1 { padding-left: var(--space-1); }
    .md-px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
    .md-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .md-p2  { padding: var(--space-2); }
    .md-pt2 { padding-top: var(--space-2); }
    .md-pr2 { padding-right: var(--space-2); }
    .md-pb2 { padding-bottom: var(--space-2); }
    .md-pl2 { padding-left: var(--space-2); }
    .md-px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
    .md-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .md-p3  { padding: var(--space-3); }
    .md-pt3 { padding-top: var(--space-3); }
    .md-pr3 { padding-right: var(--space-3); }
    .md-pb3 { padding-bottom: var(--space-3); }
    .md-pl3 { padding-left: var(--space-3); }
    .md-px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
    .md-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .md-p4  { padding: var(--space-4); }
    .md-pt4 { padding-top: var(--space-4); }
    .md-pr4 { padding-right: var(--space-4); }
    .md-pb4 { padding-bottom: var(--space-4); }
    .md-pl4 { padding-left: var(--space-4); }
    .md-px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
    .md-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  }

  @media (min-width: 960px) {
    /* Large Margin */
    .lg-m0  { margin: 0; }
    .lg-mt0 { margin-top: 0; }
    .lg-mr0 { margin-right: 0; }
    .lg-mb0 { margin-bottom: 0; }
    .lg-ml0 { margin-left: 0; }
    .lg-mx0 { margin-left: 0; margin-right: 0; }
    .lg-my0 { margin-top: 0; margin-bottom: 0; }
    .lg-m1  { margin: var(--space-1); }
    .lg-mt1 { margin-top: var(--space-1); }
    .lg-mr1 { margin-right: var(--space-1); }
    .lg-mb1 { margin-bottom: var(--space-1); }
    .lg-ml1 { margin-left: var(--space-1); }
    .lg-mx1 { margin-left: var(--space-1); margin-right: var(--space-1); }
    .lg-my1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .lg-m2  { margin: var(--space-2); }
    .lg-mt2 { margin-top: var(--space-2); }
    .lg-mr2 { margin-right: var(--space-2); }
    .lg-mb2 { margin-bottom: var(--space-2); }
    .lg-ml2 { margin-left: var(--space-2); }
    .lg-mx2 { margin-left: var(--space-2); margin-right: var(--space-2); }
    .lg-my2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .lg-m3  { margin: var(--space-3); }
    .lg-mt3 { margin-top: var(--space-3); }
    .lg-mr3 { margin-right: var(--space-3); }
    .lg-mb3 { margin-bottom: var(--space-3); }
    .lg-ml3 { margin-left: var(--space-3); }
    .lg-mx3 { margin-left: var(--space-3); margin-right: var(--space-3); }
    .lg-my3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .lg-m4  { margin: var(--space-4); }
    .lg-mt4 { margin-top: var(--space-4); }
    .lg-mr4 { margin-right: var(--space-4); }
    .lg-mb4 { margin-bottom: var(--space-4); }
    .lg-ml4 { margin-left: var(--space-4); }
    .lg-mx4 { margin-left: var(--space-4); margin-right: var(--space-4); }
    .lg-my4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .lg-mxn1 { margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
    .lg-mxn2 { margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
    .lg-mxn3 { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); }
    .lg-mxn4 { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); }
    .lg-ml-auto { margin-left: auto; }
    .lg-mr-auto { margin-right: auto; }
    .lg-mx-auto { margin-left: auto; margin-right: auto; }

    /* Large Padding */
    .lg-p0  { padding: 0; }
    .lg-pt0 { padding-top: 0; }
    .lg-pr0 { padding-right: 0; }
    .lg-pb0 { padding-bottom: 0; }
    .lg-pl0 { padding-left: 0; }
    .lg-px0 { padding-left: 0; padding-right: 0; }
    .lg-py0 { padding-top: 0; padding-bottom: 0; }
    .lg-p1  { padding: var(--space-1); }
    .lg-pt1 { padding-top: var(--space-1); }
    .lg-pr1 { padding-right: var(--space-1); }
    .lg-pb1 { padding-bottom: var(--space-1); }
    .lg-pl1 { padding-left: var(--space-1); }
    .lg-px1 { padding-left: var(--space-1); padding-right: var(--space-1); }
    .lg-py1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .lg-p2  { padding: var(--space-2); }
    .lg-pt2 { padding-top: var(--space-2); }
    .lg-pr2 { padding-right: var(--space-2); }
    .lg-pb2 { padding-bottom: var(--space-2); }
    .lg-pl2 { padding-left: var(--space-2); }
    .lg-px2 { padding-left: var(--space-2); padding-right: var(--space-2); }
    .lg-py2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .lg-p3  { padding: var(--space-3); }
    .lg-pt3 { padding-top: var(--space-3); }
    .lg-pr3 { padding-right: var(--space-3); }
    .lg-pb3 { padding-bottom: var(--space-3); }
    .lg-pl3 { padding-left: var(--space-3); }
    .lg-px3 { padding-left: var(--space-3); padding-right: var(--space-3); }
    .lg-py3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .lg-p4  { padding: var(--space-4); }
    .lg-pt4 { padding-top: var(--space-4); }
    .lg-pr4 { padding-right: var(--space-4); }
    .lg-pb4 { padding-bottom: var(--space-4); }
    .lg-pl4 { padding-left: var(--space-4); }
    .lg-px4 { padding-left: var(--space-4); padding-right: var(--space-4); }
    .lg-py4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  }
}