@media (width < 992px) {
	.main {
		display: grid;
		gap: 1rem;
		padding: 1rem;
		grid-template-areas:
			"header header "
			"form form"
			"view view";
		grid-template-columns: 1fr 1fr;
		grid-template-rows: max-content auto;
		.header {
			h2 {
				padding-inline: 1.5rem;
			}
		}
		.form {
			grid-template-areas:
				"reference"
				"header"
				"controls";
			grid-template-columns: 1fr;
			grid-template-rows: max-content auto auto;
			.controls {
				.checkbox_group {
					label {
						input {
							height: 1.5rem;
						}
					}
				}
			}
			.reference {
				grid-area: reference;
			}
		}
		.view {
			row-gap: 20px;
			padding-block: 20px;
		}
	}
}
@media (width < 660px) {
	.main {
		display: grid;
		grid-template-areas:
			"header"
			"form"
			"view";
		grid-template-columns: 1fr;
		grid-template-rows: max-content auto auto;
		.form {
			position: sticky;
			top: -16rem;
			z-index: 1;
			background-color: hsl(0 0% 66% / 0.8);
			h2 {
				justify-self: center;
				button {
					display: block;
					top: 0;
					right: -2ch;
				}
			}
			.controls {
				grid-template-areas:
					"logo_styles_checkboxes"
					"dimensions_presets";
				grid-template-columns: 1fr;
				grid-template-rows: auto auto auto;
				.controls_input {
					display: none;
				}
				.dimensions_presets_group {
					display: flex;
					justify-content: space-evenly;
					column-gap: 1vw;
					> div {
						width: 50%;
						display: grid;
						grid-template-columns: auto auto;
						column-gap: 1vw;
						row-gap: 2vw;
						span {
							grid-row: 1/4;
						}
						label {
							padding: 1vw;
						}
					}
				}
			}
		}
		.view {
			grid-template-areas:
				"test"
				"regular"
				"festive"
				"light"
				"dark";
			grid-template-columns: 1fr;
			grid-template-rows: auto 230px 230px 230px 230px;
			row-gap: 20px;
			.regular,
			.light,
			.festive,
			.dark {
				margin: auto;
			}
		}
	}
}