@layer components {
  .subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: var(--max-width-form-wide);
    margin: var(--block-space-double) auto;

    .input {
      --input-padding: var(--block-space) var(--block-space-1-25);
      --input-border-color: var(--color-link);
      font-size: var(--text-callout);
      border-width: 2px;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      border-bottom: none;
    }

    .btn--subscribe {
      --btn-padding: var(--block-space) var(--block-space-1-25);
      --btn-background: var(--color-link);
      --btn-background-hover: var(--color-link-hover);
      --btn-border-color: var(--color-link);
      --btn-color: var(--color-ink-inverted);
      font-size: var(--text-callout);
      border-width: 2px;
      border-radius: 0 0 var(--border-radius) var(--border-radius);

      &:hover {
        --btn-border-color: var(--color-link-hover);
      }
    }
  }

  @media (max-width: 640px) {
    .subscribe-form {
      flex-direction: column;
    }
  }
}