big ol pile

css/home.css

@@ -0,0 +1,80 @@
+.tagline {
+	margin-block: 2rem;
+	p {
+		font-size: 1.2rem;
+		font-family: var(--font-headers);
+		text-align: center;
+		color: var(--color-nav-light);
+	}
+}
+
+@media (max-width: 650px) {
+	.tagline {
+		margin-block: 1rem;
+		p {
+			font-size: 1.1rem;
+		}
+	}
+}
+
+.intro {
+	margin-block: 4rem;
+	display: grid;
+	gap: 1rem;
+
+	h2 {
+		grid-area: h2;
+	}
+	img {
+		grid-area: img;
+	}
+	p {
+		margin: 0;
+	}
+	.blurb {
+		grid-area: blurb;
+	}
+	.link {
+		grid-area: link;
+	}
+}
+
+.art {
+	grid-template-areas:
+		"h2 img"
+		"blurb img"
+		"link img"
+		". img";
+	grid-template-columns: 3fr 2fr;
+
+	h2, p {
+		text-align: right;
+	}
+}
+
+.therapy {
+	grid-template-areas:
+		"img h2"
+		"img blurb"
+		"img link"
+		"img .";
+	grid-template-columns: 2fr 3fr;
+}
+
+@media (max-width: 800px) {
+	.intro {
+		margin-block: 2rem;
+		grid-template-areas:
+			"h2"
+			"blurb"
+			"link"
+			"img";
+		grid-template-columns: auto;
+		h2 {
+			text-align: center;
+		}
+		p {
+			text-align: left;
+		}
+	}
+}