@layer pageHome {
	.instance {
		display: none;
	}
	body {
		display: grid;
		grid-template-areas:
		  ". . ."
			". logo ."
			"form form form"
			"nav nav nav"
			". . ."
			"footer footer footer";
		grid-template-columns: auto min-content auto;
		grid-template-rows: auto min-content min-content min-content auto min-content;
	}

	.logo {
		grid-area: logo;
		align-self: stretch;
		width: 100%;
		display: flex;
		justify-content: end;
		/* background: var(--color-primary); */


	}

	.instance {
		grid-area: instance;
	}

	.form-main {
		grid-area: form;
	}

	.nav-filter {
		grid-area: nav;
		padding: 1rem;
	}

	footer {
		grid-area: footer;
	}

	@media (min-width: 650px) {
		body {
			grid-template-areas:
				". . . ."
			  "logo . . ."
				". form form ."
				". nav nav ."
				"footer footer footer footer"
			;

			grid-template-columns: min-content minmax(1fr, 80ch) auto minmax(0, 1fr);
			grid-template-rows: auto min-content min-content auto min-content;
		}

		.form-main {
			max-width: 80ch;
		}

		.nav-filter {
			max-width: 80ch;
		}
	}

}