:root {
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* Margin Y (top + bottom) */
  .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; }

  /* margin top */
  .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; }

  /* margin bottom */
  .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; }

  /* Margin Y (top + bottom) */
  .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; }

  /* Padding top */
  .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; }

  /* Padding bottom */
  .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; }
  .mb-5 { padding-bottom: var(--space-5) !important; }
}