body.home {  }

header { display: flex; flex-direction: row; align-items: stretch; justify-content: center; background: var(--bground); color: var(--fground); width: var(--full); padding: 1.6rem; gap: 1.6rem; border-radius: 0 0 1.6rem 1.6rem; }
	h1 { font-size: 6rem; display: flex; flex-direction: row; gap: 3.2rem; justify-content: center; align-items: center; }
	h1 svg { width: 9.6rem; fill: currentColor;}

main { flex-direction: row; }
	section { text-align: left; width: var(--full); border-radius: 1.6rem; overflow: hidden; width: var(--full); display: flex; flex-direction: column; }
		.title { text-align: center; }
		.content { margin-bottom: 0; padding: 1.6rem; font-size: 1.6rem; width: var(--full); display: flex; flex-direction: row; gap: 3.2rem; }
			.content p { text-wrap: balance; }
		section aside { padding: 1.6rem; background: var(--bground); color: var(--fground); text-align: center; font-weight: bold; }
		section aside span { font-size: 3rem; }
			.intro { width: var(--full); }
				.intro p { width: var(--half); margin-bottom: 0; }
				.intro aside a { display: inline-block; margin: 0 auto; font-size: 2rem; }
			.registry { width: var(--half); flex: 1; }
				.registry .content p { width: var(--half); margin: 0 auto; }
			.store { width: var(--half); flex: 1; }
			h2 { font-size: 3.2rem; }
			h3 { font-size: 3.2rem; display: flex; flex-direction: row; gap: 1.6rem; align-items: center; justify-content: center; }
			h3 svg { height: 4rem; width: 4rem; fill: currentColor; }

@media only screen and (max-width: 640px) {
	header { flex-direction: column; gap: .8rem; align-items: center; }
	h1 { flex-direction: column; gap: .8rem; align-items: center; text-align: center; font-size: 3.2rem; }
	h1 svg { width: 6.4rem; }
	section .content { flex-direction: column; gap: 1.6rem; }
	.intro .content p { width: var(--full); }
	.registry .content p { width: var(--full); }
	h2 { font-size: 2.4rem; }
	h3 { font-size: 2.4rem; }
	h3 svg { height: 3.2rem; width: 3.2rem; }
}