[section="page"] {
  display: grid;
  gap: var(--spacing-12);
}

[section="page"] .page-head,[section="page"] .page-content {
    padding: var(--spacing-64);
    border-radius: var(--radius-md);
  }

.page-head:is([section="page"] .page-head,[section="page"] .page-content) {
      background-color: var(--color-surface-container-low);
    }

.page-head:is([section="page"] .page-head,[section="page"] .page-content) .title {
        font: var(--font-headline-md);
      }

.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form {
        width: 50%;
        display: grid;
        gap: var(--spacing-12);
      }

:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .error,:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .success {
          display: flex;
          align-items: center;
          gap: var(--spacing-4);
        }

.error:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .error,:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .success) {
            color: var(--color-error);
          }

.success:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .error,:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .success) {
            color: var(--color-success);
          }

:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .errors {
          list-style: circle;
          padding-inline-start: calc(var(--spacing-24) + var(--spacing-8));
        }

:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .errors) li {
            opacity: 0.8;
            font: var(--font-body-sm);
          }

:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields {
          display: grid;
          gap: var(--spacing-12);
          grid-template-columns: repeat(2, 1fr);
        }

:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field {
            display: grid;
            gap: var(--spacing-8);
          }

:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field):last-child {
              grid-column: 1 / 3;
            }

:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field):has(input:required) label::after {
                content: " *";
                color: var(--color-error);
              }

:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > input,:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > textarea {
              width: 100%;
              outline: none;
              border-radius: var(--radius-xs);
              padding: var(--spacing-12) var(--spacing-16);
              color: var(--color-on-background);
              background-color: var(--color-surface-container);
              border: 1px solid var(--color-surface-container-highest);
              transition: border-color var(--transition-standard-default-effects);
            }

:is(:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > input,:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > textarea)::placeholder {
                color: color-mix(in srgb, currentColor 50%, transparent);
              }

:is(:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > input,:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > textarea):focus {
                border-color: var(--color-on-background);
              }

:is(:is(:is(.page-content:is([section="page"] .page-head,[section="page"] .page-content) > form) .fields) .field) > textarea {
              min-height: 43px;
              resize: vertical;
            }

/* Responsive */
@media (max-width: 1024px) {
    [section="page"] .page-head,[section="page"] .page-content {
      padding: calc(var(--spacing-24) + var(--spacing-8));
    }
}

@media (max-width: 769px) {
        :is(:is([section="page"] .page-content) > form) .fields {
          grid-template-columns: 1fr !important;
        }

          :is(:is(:is([section="page"] .page-content) > form) .fields) .field:last-child {
            grid-column: auto !important;
          }
}