@import url("/assets/css/root.css");

body {
	grid-template-columns: 1fr 2fr;

	& > aside {
		align-items: center;
		grid-template: 30px 1fr 30px / auto;

		& > hgroup {
			padding: var(--pft-gap);
			backdrop-filter: blur(10px);
			box-shadow: var(--pft-shadow);
			border-radius: var(--pft-gap-fourth);
			background-color: oklch(from var(--pft-3) l c h / 20%);
		}
	}

	& > main {
		grid-template: 30px 1fr 30px / auto;

		& > form {
			margin: auto;
			max-width: 500px;
			padding: var(--pft-gap);

			& fieldset {
				display: grid;
				gap: var(--pft-gap-half);

				& > legend {
					padding-bottom: var(--pft-gap-half);
				}
			}
		}
	}
}