@import "@Themes/constants.scss";

.root {
	margin: 24px auto;
	width: 566px;

	@media (max-width: $screen-m) {
		width: 474px;
	}

	@media (max-width: $screen-s) {
		width: 100%;
		padding: var(--spacing-md, 16px);
	}

	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl, 32px);

	.form {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md, 16px);
	}

	.button-container {
		display: flex;
		gap: var(--spacing-md, 16px);

		@media (max-width: $screen-xs) {
			button {
				width: 100%;
			}
			flex-direction: column-reverse;
		}
	}
}