rglkart/css/home.css

.tagline {
	margin-block: 2rem;
	p {
		font-size: 1.3rem;
		font-family: var(--font-headers);
		text-align: center;
		color: var(--color-headers);
	}
}

@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;
		margin-top: 0;
	}
	img {
		grid-area: img;
	}
	p {
		margin: 0;
	}
	.blurb {
		grid-area: blurb;
	}
	.link {
		grid-area: link;
	}
}

@media (max-width: 650px) {
	.intro {
		gap: .5rem;
	}
}

.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;
		}
	}
}