@layer components {
  .form {
  }

  .form\:inline {
    display: inline-block;
  }

  .form\:center {
    margin: 0 auto;
  }

  .form\:narrow {
    max-width: 40ch;
  }

  .form\:framed {
    background-color: var(--gray-1);
    border: solid 1px var(--gray-3);
    padding: var(--size-2);
    margin-bottom: var(--size-4);
  }

  .form\/title {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-6);
    margin-bottom: var(--size-4);
  }

  .form\/field {
    margin-bottom: var(--size-4);
  }

  .form\/field\:required {
    legend::after {
      color: var(--red-8);
      content: "*";
      margin-left: var(--size-1);
    }
  }
}