@layer utilities {
  :root {
    --container-width: 640px;
  }

  .page,
  .container {
    @apply max-w-(--container-width) w-full mx-auto sm:p-6 max-sm:p-4;
  }

  .section {
    @apply mb-8;
  }

  .y-stack {
    @apply flex flex-col gap-4 h-auto;

    & > :is(h1, h2, h3, h4, h5, h6, p) {
      @apply m-0!;
    }
  }

  .x-stack {
    @apply flex items-center gap-3;

    & > :is(h1, h2, h3, h4, h5, h6, p) {
      @apply m-0!;
    }
  }
}

@utility bounce {
  @apply active:not-disabled:translate-y-0.5 transition-transform duration-150 ease-out;
}

@utility touch-hitbox {
  position: relative;

  &:before {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}