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

  .page-head,
  .page-content {
    padding: var(--spacing-64);
    border-radius: var(--radius-md);

    &.page-head {
      background-color: var(--color-surface-container-low);

      .title {
        font: var(--font-headline-md);
      }
    }

    &.page-content {
      & > form {
        width: 50%;
        display: grid;
        gap: var(--spacing-12);

        .error,
        .success {
          display: flex;
          align-items: center;
          gap: var(--spacing-4);

          &.error {
            color: var(--color-error);
          }

          &.success {
            color: var(--color-success);
          }
        }

        .errors {
          list-style: circle;
          padding-inline-start: calc(var(--spacing-24) + var(--spacing-8));

          li {
            opacity: 0.8;
            font: var(--font-body-sm);
          }
        }

        .fields {
          display: grid;
          gap: var(--spacing-12);
          grid-template-columns: repeat(2, 1fr);

          .field {
            display: grid;
            gap: var(--spacing-8);

            &:last-child {
              grid-column: 1 / 3;
            }

            &:has(input:required) {
              label::after {
                content: " *";
                color: var(--color-error);
              }
            }

            & > input,
            & > 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);

              &::placeholder {
                color: color-mix(in srgb, currentColor 50%, transparent);
              }

              &:focus {
                border-color: var(--color-on-background);
              }
            }

            & > textarea {
              min-height: 43px;
              resize: vertical;
            }
          }
        }
      }
    }
  }
}

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

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

          .field:last-child {
            grid-column: auto !important;
          }
        }
      }
    }
  }
}