@charset "UTF-8";
:root {
  --space: 8px;
}

/* margin */
.u-m-1  { margin:        calc(var(--space) * 1); }
.u-m-2  { margin:        calc(var(--space) * 2); }
.u-m-3  { margin:        calc(var(--space) * 3); }
.u-m-4  { margin:        calc(var(--space) * 4); }
.u-m-5  { margin:        calc(var(--space) * 5); }
.u-m-6  { margin:        calc(var(--space) * 6); }

.u-mt-1 { margin-top:    calc(var(--space) * 1); }
.u-mt-2 { margin-top:    calc(var(--space) * 2); }
.u-mt-3 { margin-top:    calc(var(--space) * 3); }
.u-mt-4 { margin-top:    calc(var(--space) * 4); }
.u-mt-5 { margin-top:    calc(var(--space) * 5); }
.u-mt-6 { margin-top:    calc(var(--space) * 6); }

.u-mr-1 { margin-right:  calc(var(--space) * 1); }
.u-mr-2 { margin-right:  calc(var(--space) * 2); }
.u-mr-3 { margin-right:  calc(var(--space) * 3); }
.u-mr-4 { margin-right:  calc(var(--space) * 4); }
.u-mr-5 { margin-right:  calc(var(--space) * 5); }
.u-mr-6 { margin-right:  calc(var(--space) * 6); }

.u-mb-1 { margin-bottom: calc(var(--space) * 1); }
.u-mb-2 { margin-bottom: calc(var(--space) * 2); }
.u-mb-3 { margin-bottom: calc(var(--space) * 3); }
.u-mb-4 { margin-bottom: calc(var(--space) * 4); }
.u-mb-5 { margin-bottom: calc(var(--space) * 5); }
.u-mb-6 { margin-bottom: calc(var(--space) * 6); }

.u-ml-1 { margin-left:   calc(var(--space) * 1); }
.u-ml-2 { margin-left:   calc(var(--space) * 2); }
.u-ml-3 { margin-left:   calc(var(--space) * 3); }
.u-ml-4 { margin-left:   calc(var(--space) * 4); }
.u-ml-5 { margin-left:   calc(var(--space) * 5); }
.u-ml-6 { margin-left:   calc(var(--space) * 6); }

.u-mx-1 { margin-left:   calc(var(--space) * 1); margin-right:  calc(var(--space) * 1); }
.u-mx-2 { margin-left:   calc(var(--space) * 2); margin-right:  calc(var(--space) * 2); }
.u-mx-3 { margin-left:   calc(var(--space) * 3); margin-right:  calc(var(--space) * 3); }
.u-mx-4 { margin-left:   calc(var(--space) * 4); margin-right:  calc(var(--space) * 4); }
.u-mx-5 { margin-left:   calc(var(--space) * 5); margin-right:  calc(var(--space) * 5); }
.u-mx-6 { margin-left:   calc(var(--space) * 6); margin-right:  calc(var(--space) * 6); }

.u-my-1 { margin-top:    calc(var(--space) * 1); margin-bottom: calc(var(--space) * 1); }
.u-my-2 { margin-top:    calc(var(--space) * 2); margin-bottom: calc(var(--space) * 2); }
.u-my-3 { margin-top:    calc(var(--space) * 3); margin-bottom: calc(var(--space) * 3); }
.u-my-4 { margin-top:    calc(var(--space) * 4); margin-bottom: calc(var(--space) * 4); }
.u-my-5 { margin-top:    calc(var(--space) * 5); margin-bottom: calc(var(--space) * 5); }
.u-my-6 { margin-top:    calc(var(--space) * 6); margin-bottom: calc(var(--space) * 6); }

/* padding */
.u-p-1  { padding:        calc(var(--space) * 1); }
.u-p-2  { padding:        calc(var(--space) * 2); }
.u-p-3  { padding:        calc(var(--space) * 3); }
.u-p-4  { padding:        calc(var(--space) * 4); }
.u-p-5  { padding:        calc(var(--space) * 5); }
.u-p-6  { padding:        calc(var(--space) * 6); }

.u-pt-1 { padding-top:    calc(var(--space) * 1); }
.u-pt-2 { padding-top:    calc(var(--space) * 2); }
.u-pt-3 { padding-top:    calc(var(--space) * 3); }
.u-pt-4 { padding-top:    calc(var(--space) * 4); }
.u-pt-5 { padding-top:    calc(var(--space) * 5); }
.u-pt-6 { padding-top:    calc(var(--space) * 6); }

.u-pr-1 { padding-right:  calc(var(--space) * 1); }
.u-pr-2 { padding-right:  calc(var(--space) * 2); }
.u-pr-3 { padding-right:  calc(var(--space) * 3); }
.u-pr-4 { padding-right:  calc(var(--space) * 4); }
.u-pr-5 { padding-right:  calc(var(--space) * 5); }
.u-pr-6 { padding-right:  calc(var(--space) * 6); }

.u-pb-1 { padding-bottom: calc(var(--space) * 1); }
.u-pb-2 { padding-bottom: calc(var(--space) * 2); }
.u-pb-3 { padding-bottom: calc(var(--space) * 3); }
.u-pb-4 { padding-bottom: calc(var(--space) * 4); }
.u-pb-5 { padding-bottom: calc(var(--space) * 5); }
.u-pb-6 { padding-bottom: calc(var(--space) * 6); }

.u-pl-1 { padding-left:   calc(var(--space) * 1); }
.u-pl-2 { padding-left:   calc(var(--space) * 2); }
.u-pl-3 { padding-left:   calc(var(--space) * 3); }
.u-pl-4 { padding-left:   calc(var(--space) * 4); }
.u-pl-5 { padding-left:   calc(var(--space) * 5); }
.u-pl-6 { padding-left:   calc(var(--space) * 6); }

.u-px-1 { padding-left:   calc(var(--space) * 1); padding-right:  calc(var(--space) * 1); }
.u-px-2 { padding-left:   calc(var(--space) * 2); padding-right:  calc(var(--space) * 2); }
.u-px-3 { padding-left:   calc(var(--space) * 3); padding-right:  calc(var(--space) * 3); }
.u-px-4 { padding-left:   calc(var(--space) * 4); padding-right:  calc(var(--space) * 4); }
.u-px-5 { padding-left:   calc(var(--space) * 5); padding-right:  calc(var(--space) * 5); }
.u-px-6 { padding-left:   calc(var(--space) * 6); padding-right:  calc(var(--space) * 6); }

.u-py-1 { padding-top:    calc(var(--space) * 1); padding-bottom: calc(var(--space) * 1); }
.u-py-2 { padding-top:    calc(var(--space) * 2); padding-bottom: calc(var(--space) * 2); }
.u-py-3 { padding-top:    calc(var(--space) * 3); padding-bottom: calc(var(--space) * 3); }
.u-py-4 { padding-top:    calc(var(--space) * 4); padding-bottom: calc(var(--space) * 4); }
.u-py-5 { padding-top:    calc(var(--space) * 5); padding-bottom: calc(var(--space) * 5); }
.u-py-6 { padding-top:    calc(var(--space) * 6); padding-bottom: calc(var(--space) * 6); }

/* gap */
.u-gap-1 { gap: calc(var(--space) * 1); }
.u-gap-2 { gap: calc(var(--space) * 2); }
.u-gap-3 { gap: calc(var(--space) * 3); }
.u-gap-4 { gap: calc(var(--space) * 4); }
.u-gap-5 { gap: calc(var(--space) * 5); }
.u-gap-6 { gap: calc(var(--space) * 6); }