@layer utility {
  .px-none {
    padding-inline: 0px;
  }
  .px-xs {
    /* 6px */
    padding-inline: var(--padding-xs);
  }
  .px-sm {
    /* 8px */
    padding-inline: var(--padding-sm);
  }
  .px-md {
    /* 10px */
    padding-inline: var(--padding-md);
  }
  .px-lg {
    /* 16px */
    padding-inline: var(--padding-lg);
  }
  .px-xl {
    padding-inline: var(--padding-xl);
  }
  /* ------------------------ */
  .py-none {
    padding-block: 0px;
  }
  .py-xs {
    padding-block: var(--padding-xs);
  }
  .py-sm {
    padding-block: var(--padding-sm);
  }
  .py-md {
    padding-block: var(--padding-md);
  }
  .py-lg {
    padding-block: var(--padding-lg);
  }
  .py-xl {
    padding-block: var(--padding-xl);
  }
}