@import "@Themes/constants.scss";

.root {
	.header {
		display: flex;
		padding: 64px;

		@media (max-width: $screen-m) {
			flex-wrap: wrap;

			.text {
				margin: 32px 0;
			}
		}

		@media (max-width: $screen-s) {
			flex-wrap: wrap;

			.text {
				margin: 32px 0;
			}

			.button {
				flex: 1;
			}
		}

		.subtitle {
			margin: 32px 0;
		}
	}

	.sub-container {
		background-color: var(--grey-soft);
		padding: 64px;

		.content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 32px;
			margin-bottom: 64px;

			@media (max-width: $screen-s) {
				grid-template-columns: 1fr;
			}



		}

		.component-to-replace {
			min-width: 124px;
			height: 98px;
			background-color: white;
		}

		.text {
			margin: 32px 0;
		}

		.button {
			width: fit-content;
		}

		@media (max-width: $screen-s) {
			.button {
				width: 100%;
			}
		}
	}

	.modal-content {
		.text {
			margin: 24px 0;
		}

		.component-to-replace {
			background-color: var(--grey-soft);
			height: 98px;
			width: 100%;

		}
	}


}