@layer utilities {

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

  .margin-block-start { margin-block-start: var(--block-space); }
  .margin-block-start-double { margin-block-start: 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-none {
    --column-gap: 0;
    --row-gap: 0;

    gap: 0;
  }
}