@layer layout {
  .stack {
    --layout-gap: 0;
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
  }

  .stack-row {
    --layout-gap: 0;
    display: flex;
    flex-direction: row;
    gap: var(--layout-gap);

    > * {
      flex: 1;
    }

    @media (max-width: 480px) {
      flex-direction: column;
    }
  }

  .stack-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--layout-gap);
  }

  :is(.stack, .stack-row, .stack-wrap) {
    > * {
      margin: 0;
    }

    &.gap-sm {
      --layout-gap: var(--spacing-sm);
    }

    &.gap-md {
      --layout-gap: var(--spacing-md);
    }
  }
}