@layer utilities {
  .display-inline-block { display: inline-block; }
  .display-contents { display: contents; }

  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-double { padding: var(--block-space-double) var(--inline-space-double); }

  .pad-block { padding-block: var(--block-space); }
  .pad-block-start { padding-block-start: var(--block-space); }
  .pad-block-end { padding-block-end: var(--block-space); }
  .pad-block-half { padding-block: var(--block-space-half); }
  .pad-block-start-half { padding-block-start: var(--block-space-half); }
  .pad-block-end-half { padding-block-end: var(--block-space-half); }

  .pad-inline { padding-inline: var(--inline-space); }
  .pad-inline-start { padding-inline-start: var(--inline-space); }
  .pad-inline-end { padding-inline-end: var(--inline-space); }
  .pad-inline-half { padding-inline: var(--inline-space-half); }
  .pad-inline-double { padding-inline: var(--inline-space-double); }

  .margin-block-start { margin-block-start: var(--block-space); }
  .margin-block-start-double { margin-block-start: var(--block-space-double); }

  .margin-block-end { margin-block-end: var(--block-space); }
  .margin-block-end-double { margin-block-end: var(--block-space-double); }

  .flex { display: flex; }
  .justify-between { justify-content: space-between; }

  .grid { display: grid; }

  .align-center { align-items: center; }
  .align-start { align-items: start; }
  .align-end { align-items: end; }

  .gap {
    column-gap: var(--column-gap, var(--inline-space));
    row-gap: var(--row-gap, var(--block-space));
  }

  .gap-half {
    column-gap: var(--column-gap, var(--inline-space-half));
    row-gap: var(--row-gap, var(--block-space-half));
  }

  .gap-double {
    column-gap: var(--column-gap, var(--inline-space-double));
    row-gap: var(--row-gap, var(--block-space-double));
  }

  .gap-none {
    --column-gap: 0;
    --row-gap: 0;

    gap: 0;
  }

  .width-full { inline-size: 100%; }
  .width-fit-content { inline-size: fit-content; }

  .justify-end { justify-content: end; }
  .justify-start { justify-content: start; }
  .justify-center { justify-content: center; }
  .justify-space-between { justify-content: space-between; }

  .justify-self-end { justify-self: end; }
  .justify-self-start { justify-self: start; }
  .justify-self-center { justify-self: center; }

  .text-align-center { text-align: center; }
  .text-align-start { text-align: start; }
  .text-align-end { text-align: end; }

  .flex-no-shrink { flex-shrink: 0; }
}