.profile-edit {
	padding: var(--space-l-2xl) 0;

	& > form {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
		max-width: 48rem;

		& > h2 {
			margin-top: var(--space-m);
			padding-bottom: var(--space-xs);
			border-bottom: 1px solid var(--color-neutral-8);
		}

		& > p {
			color: var(--color-neutral-4);
		}

		& > .notice {
			background: var(--color-color-9);
			color: var(--color-color-2);
			padding: var(--space-xs) var(--space-s);
			border-radius: var(--border-radius);
		}

		.field {
			display: flex;
			flex-direction: column;
			gap: var(--space-2xs);
			width: 100%;

			& > input,
			& > textarea {
				width: 100%;
			}
		}

		& > .hol-wrapping-row {
			grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
		}

		& > .rows {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: var(--space-m);

			& > .row {
				display: flex;
				flex-direction: column;
				gap: var(--space-s);
				padding: var(--space-s);
				border: 1px solid var(--color-neutral-8);
				border-radius: var(--border-radius);

				& > .hol-wrapping-row {
					grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
				}
			}
		}

		& > button.secondary {
			align-self: start;
		}

		& > .checks {
			display: flex;
			flex-direction: column;
			gap: var(--space-xs);

			& > label {
				display: flex;
				align-items: center;
				gap: var(--space-xs);
			}
		}

		& > .actions {
			display: flex;
			gap: var(--space-s);
			align-items: center;
			margin-top: var(--space-m);
		}
	}
}