@layer utilities {
  [data-theme] {
    .stack {
      display: flex;
      flex-direction: column;
      gap: var(--stack-gap, var(--space-4));
    }

    .stack--tight { --stack-gap: var(--space-2); }
    .stack--loose { --stack-gap: var(--space-6); }

    .cluster {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--cluster-gap, var(--space-3));
    }

    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--space-4);

      @media (min-width: 40rem) {
        padding-inline: var(--space-5);
      }
    }

    .container--narrow {
      max-width: var(--container-narrow);
    }

    .text-muted {
      color: var(--color-text-muted);
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }
}